Javascript 加载后生成的dom元素上的.change（）函数

我试图捕获在dom生成之后添加的select上的一个更改（），但我无法成功。下面是一个示例代码：

HTML:

jQuery：

$('#divTest').click(function(){ $(this).parent().append("<select id='testSel'><option value='f'>F</option><option value='F'>D</option></select>");});

$('#testSel').change(function(){
    alert('change');
});

$（'#divTest'）。单击（函数（）{$（this.parent（）.append（“FD”）；}）；
$（'#testSel'）.change（function（）{
警报（“变更”）；
});

我想在更改select中的值时看到警报

这是一把小提琴。 您需要动态添加DOM:：

事件委派允许我们将单个事件侦听器附加到父元素，该事件侦听器将为与选择器匹配的所有子体触发，无论这些子体现在存在还是将来添加

试试这个

$('body').on("change", "#testSel", function(){
    alert('change');
})

两个问题：

您的

select

元素的ID是

#testS

而不是

#testSel

。1

为此，需要通过jQuery的

on（）

方法使用：

$（'body'）。关于（'change'，'#testS'，function（）{
警报（“变更”）；
});

事件委派允许我们将单个事件侦听器附加到父元素，该事件侦听器将为与选择器匹配的所有子体触发，无论这些子体现在存在还是将来添加

---

---

一,。这与问题中的原始JSFIDLE（可用）相关。该问题已被编辑。

加载DOM后，当元素添加到DOM中时，必须使用绑定事件：

$(document).on('change','#testSel',function(){
    alert('change');
});

请参见

$（'#divTest'）。单击（函数（）{
$（this.parent（）.append（“FD”）；
$（'#testS'）.change（函数（）{alert（'change'）；}）；
});

您不能对尚不存在的内容出价，因此在单击后在函数内部绑定它。

---

选择器“测试”与“测试选择”中有一个输入错误，请改用委派。1。因为您正在操作DOM，所以应该在上使用

。2.有多个具有相同ID的元素是一件坏事。（如果用户多次单击按钮…）。您当前的
select
元素在编写绑定事件时有
id='testS'
。每个人都听说过Jquery
live
事件。@JitendraYadav Jquery的
live
事件在Jquery 1.7中被弃用<应该改用

上的code>。如何在文本@James周围生成灰色背景？@EhsanSajjad请看，灰色背景表示该文本是一个块引号，可以通过在文本前面加一个

（例如，

>文本…

）.@EhsanSajjad您也可以使用编辑功能只是为了查看文本的格式…@JamesDonnelly是的，很抱歉我忘了提到我编辑了原始问题&小提琴以删除打字错误。@Superdrac无需担心；我想我应该在回答中加上澄清，以免混淆任何未来的访问者。：）

$('body').on("change", "#testSel", function(){
    alert('change');
})

$(document).on('change','#testSel',function(){
    alert('change');
});

$('#divTest').click(function(){
  $(this).parent().append("<select id='testS'><option value='f'>F</option><option value='F'>D</option></select>");
  $('#testS').change(function(){alert('change');});
});