jQuery .change() 不适用于 textarea

Posted 2023-05-07

【中文标题】jQuery .change() 不适用于 textarea

【英文标题】：jQuery .change() not working on textarea

【发布时间】：2013-04-08 04:05:27

【问题描述】：

这是我第一次在 *** 上提问，但我目前对我正在创建的一些公司代码感到困惑。它根本不会接受 .change() 或绑定到 keyup。我以前没有遇到过问题，但今天它不再对我有用。查看我的代码，看看是否有任何可能导致问题的地方。

对不起格式，我是新人。

var currentContent = "null";
var customeri = "";
var optionsi = "";
var equipmenti = "";
var picturei = "";
$(document).ready(function() 
    $("#preview").hide();
    $("#previewPane").hide();
    $("#previewHeading").hide();
$(".uiFonts").click(function() 
    var clickedID = $(this).attr("id");
    if(clickedID !== null) 
        $("#main").hide();
        loadContent(clickedID);
    
);

$("#Equipment").bind('change keyup', function() 
        equipmenti = $(this).val();
                    $("#preview").html('<br /><span class="reg">Customer Info<br /></span>'+customeri+'<br /><br /><span class="reg">Options<br /></span>'+optionsi+'<br /><br /><span class="reg">Equipment<br /></span>'+equipmenti+'<br /><br /><span class="reg">Picture:<br /></span><img src="'+picturei+'" />');
);
);
function loadContent(cID) 
$("#main").load(cID + ".html", function() 
    $("#main").slideDown(1500);
    $("#preview").fadeIn(1500);
    $("#previewPane").fadeIn(1500);
    $("#previewHeading").fadeIn(1500);
    currentContent = cID;
);

包含textareas的.html文件如下：

<p><span class="reg">Customer Info - Name, Address, Phone, Email</span><br />
<textarea name="Customer Info" class="textAreas inputs" id="Customer"></textarea>
<br />
<br />
<span class="reg">Trailer Options</span>
<br />
<textarea name="Options" class="inputs textAreas" id="Options"></textarea>
<br />
<br />
<span class="reg">Trailer Equipment</span>
<br />
<textarea name="Equipment" class="inputs textAreas" id="Equipment"></textarea>
<br>
<br>
<span class="reg">Picture URL</span></p>
<input type="text" id="picture" class="inputs"></input>

我已经尝试过一般地绑定它们，例如：

$(".inputs").change(function() 
    customeri = $("#Customer").val();
    optionsi = $("#Options").val();
    //etc

【问题讨论】：

欢迎...！为了清楚起见，你想让这个 change() 做什么？

欢迎，如果您希望人们帮助您，我建议您将您的代码修剪为不起作用的部分，并且 - 更好的是 - 准备一个 jsfiddle.net 来展示您的示例以及您的意思不是工作。

$("#Equipment").bind("change keyup") 使用变量 equipmenti 和 optionsi，但从不设置它们。底部的change 函数设置变量，但不对它们做任何事情。你需要一个能同时做这两件事的处理程序。

【参考方案1】：

加载外部 .html 文件时，jquery 无法定期访问它并对其应用操作。之所以出现这个问题，是因为在触发器 $(document).ready 中，它在加载之前找不到指向 .html 中找到的 id 的链接，如果在文档之后调用外部 .html，它就太晚了。准备好了。

解决方法是将 .change 包含在单独的 jquery 函数中，或者在文档完成加载之前加载 .html。

【参考方案2】：

工作FIDDLE。为了确认，我添加了 <div id='test'/> ， $("#Equipment").bind('change keyup', function(e) $('#test').append(e.type); 并按预期获取和更改。

更新我认为您的问题出在其他地方，因为事件都在触发。 （您知道只有在将 textarea 设置为不同的值后才会触发更改？）

【讨论】：

我真的无法让它工作。我的意思是，你有我所有的代码。我已经使它更通用和简洁，但它仍然无法正常工作。 编辑： 我想我已经从逻辑上找出了问题所在，在我看来，在加载外部 .html 时，它会在文档准备好时调用该函数，但未加载类和 id直到调用 loadContent()，因此使其无法访问并忽略 .bind()。让我把它编译成一个单独的 div 看看它是怎么回事。我会更新你们的！

查看我的回答以了解发生了什么。