Javascript 在更改函数之后使用jQuery选择对象，修改了需要选择的元素的html结构
我有以下代码（玩一些选择） 在第一个更改功能之后，第二个更改功能不起作用：Javascript 在更改函数之后使用jQuery选择对象，修改了需要选择的元素的html结构,javascript,jquery,Javascript,Jquery,我有以下代码（玩一些选择） 在第一个更改功能之后，第二个更改功能不起作用： jQuery('.toPopSelect').change(function(){ console.log("hey"); }); 我认为这是因为第一个change函数替换了一些html，jQuery无法选择后面的.toPopSelect类。 知道为什么会这样吗？有办法绕过它吗 <select class="theSelect">
jQuery('.toPopSelect').change(function(){
console.log("hey");
});
<select class="theSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="toPopulate">
<select class="toPopSelect">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
jQuery(document).ready(function(){
jQuery('.theSelect').change(function(){
jQtoPopulate = jQuery('.toPopulate');
jQtoPopulate.empty();
jQtoPopSelect = jQuery('.toPopSelect');
v = jQuery(this).val();
if ( v == 1) {
console.log("ues")
jQtoPopulate.html('<input type="text" size="60"><\/input>');
} else {
jQtoPopulate.html('<select class="toPopSelect"><option value="1">1<\/option><option value="2">2<\/option><option value="3">3<\/option><option value="4">4<\/option><option value="5">5<\/option><\/select>');
jQtoPopSelect.append('<option value="6">6<\/option>');
}
});
jQuery('.toPopSelect').change(function(){
console.log("hey");
});
});
1.
2.
3.
4.
5.
1.
2.
jQuery（文档）.ready（函数（）{
jQuery（'.theSelect'）.change（函数（）{
jQtoPopulate=jQuery（'.toPopulate'）；
jQtoPopulate.empty（）；
jQtoPopSelect=jQuery（'.toPopSelect'）；
v=jQuery（this.val（）；
如果（v==1）{
控制台日志（“ues”）
jQtoPopulate.html（“”）；
}否则{
jQtoPopulate.html（'12345'）；
jQtoPopSelect.append（'6'）；
}
});
jQuery（'.toPopSelect'）.change（函数（）{
console.log（“嘿”）；
});
});
有什么想法吗？你必须正确地进行活动委派。由于
.toPopSelect如果您可以用静态外部容器的class/id来替换
文档.toPopSelect文档jQuery(document).ready(function(){
jQuery('.theSelect').change(function(){
jQtoPopulate = jQuery('.toPopulate');
jQtoPopulate.empty();
jQtoPopSelect = jQuery('.toPopSelect');
v = jQuery(this).val();
if ( v == 1) {
console.log("ues")
jQtoPopulate.html('<input type="text" size="60"><\/input>');
} else {
jQtoPopulate.html('<select class="toPopSelect"><option value="1">1<\/option><option value="2">2<\/option><option value="3">3<\/option><option value="4">4<\/option><option value="5">5<\/option><\/select>');
jQtoPopSelect.append('<option value="6">6<\/option>');
}
});
var c = $(document);
c.delegate(".toPopSelect","change",function(){ alert("hey"); });
});
jQuery（文档）.ready（函数（）{
jQuery（'.theSelect'）.change（函数（）{
jQtoPopulate=jQuery（'.toPopulate'）；
jQtoPopulate.empty（）；
jQtoPopSelect=jQuery（'.toPopSelect'）；
v=jQuery（this.val（）；
如果（v==1）{
控制台日志（“ues”）
jQtoPopulate.html（“”）；
}否则{
jQtoPopulate.html（'12345'）；
jQtoPopSelect.append（'6'）；
}
});
var c=$（文件）；
c、 委托（“.toPopSelect”，“change”，function（）{alert（“hey”）；}）；
});
jQuery(document).ready(function(){
jQuery('.theSelect').change(function(){
jQtoPopulate = jQuery('.toPopulate');
jQtoPopulate.empty();
jQtoPopSelect = jQuery('.toPopSelect');
v = jQuery(this).val();
if ( v == 1) {
console.log("ues")
jQtoPopulate.html('<input type="text" size="60"><\/input>');
} else {
jQtoPopulate.html('<select class="toPopSelect"><option value="1">1<\/option><option value="2">2<\/option><option value="3">3<\/option><option value="4">4<\/option><option value="5">5<\/option><\/select>');
jQtoPopSelect.append('<option value="6">6<\/option>');
}
});
var c = $(document);
c.delegate(".toPopSelect","change",function(){ alert("hey"); });
});
jQuery（文档）.ready（函数（）{
jQuery（'.theSelect'）.change（函数（）{
jQtoPopulate=jQuery（'.toPopulate'）；
jQtoPopulate.empty（）；
jQtoPopSelect=jQuery（'.toPopSelect'）；
v=jQuery（this.val（）；
如果（v==1）{
控制台日志（“ues”）
jQtoPopulate.html（“”）；
}否则{
jQtoPopulate.html（'12345'）；
jQtoPopSelect.append（'6'）；
}
});
var c=$（文件）；
c、 委托（“.toPopSelect”，“change”，function（）{alert（“hey”）；}）；
});
有关的详细信息：您必须使用这样的侦听器，因为您在之后添加了代码 jsFiddle演示了以下内容：
更多信息：正如您所说。因为当您更改第一个select元素时，您正在更改DOM，所以它正在写入第二个select元素，因此您的
console.log（“hey”）事件处理程序不再存在
当代码运行以下命令时：
jQuery('.toPopSelect').change(function(){
console.log("hey");
});
它所做的是将处理程序附加到运行代码时匹配.toPopSelect
的所有元素上。它不是将事件处理程序附加到页面中所有出现的.toPopSelect
因此，您可以在更改DOM后重新附加事件处理程序：
jQuery('.theSelect').change(function(){
// stuff that changes DOM here
jQuery('.toPopSelect').change(function(){
console.log("hey");
});
});
您可以做的另一件事是使用：
$('.toPopulate').on('change', '.toPopSelect', function(){
console.log("hey");
});
这将为.toPopulate
分配一个事件处理程序，但仅由与第二个参数（.toPopSelect
）匹配的事件触发。见：
请注意，如果从DOM中更改或删除.toPopulate
，则这也将不再适用。（基本上选择将保留在DOM中的.toPopSelect
的最近祖先。）正如您所说。因为当您更改第一个select元素时，您正在更改DOM，所以它正在写入第二个select元素，因此您的console.log（“hey”）事件处理程序不再存在
当代码运行以下命令时：
jQuery('.toPopSelect').change(function(){
console.log("hey");
});
它所做的是将处理程序附加到运行代码时匹配.toPopSelect
的所有元素上。它不是将事件处理程序附加到页面中所有出现的.toPopSelect
因此，您可以在更改DOM后重新附加事件处理程序：
jQuery('.theSelect').change(function(){
// stuff that changes DOM here
jQuery('.toPopSelect').change(function(){
console.log("hey");
});
});
您可以做的另一件事是使用：
$('.toPopulate').on('change', '.toPopSelect', function(){
console.log("hey");
});
这将为.toPopulate
分配一个事件处理程序，但仅由与第二个参数（.toPopSelect
）匹配的事件触发。见：
请注意，如果从DOM中更改或删除.toPopulate
，则这也将不再适用。（基本上选择将保留在DOM中的.toPopSelect
的最近祖先。）Ty为了回答，我得到一个错误-ReferenceError:change未定义我必须对错误进行修改：o。我纠正了它。这是“改变”，而不仅仅是改变。但是我的JSFIDLE从一开始就很有效：）@DanyD-wrap“change”加引号我觉得BYossarian更完整，这就是为什么我选择他的答案作为被接受的答案。我对你的答案投了赞成票。没问题：）。谢谢你的回答，我得到了一个错误-ReferenceError:change未定义我对error:o做出了修改。我纠正了它。这是“改变”，而不仅仅是改变。但我的JSFIDLE从一开始就起作用：）@DanyD-