Question

我试图在dom生成后添加的选择中捕获更改（），但我无法成功。以下是示例代码：

HTML：

<div class="test" id="divTest"></div>

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');
});

我希望在更改选择中的值时看到提醒..

这是一个小提琴。 http://jsfiddle.net/T8J8p/3/

Answer 1

两个问题：

您的select元素的ID为#testS而非#testSel。¹
您需要通过jQuery的on()方法使用event delegation：

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

JSFiddle demo

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

^{1。这与问题中的原始JSFiddle相关（可用here）。这个问题已被编辑。}

Answer 2

您需要动态添加event delegation DOM ::

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

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

<强> Demo

Answer 3

试试这个，

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

Answer 4

您必须使用event delegation绑定事件，因为在DOM加载后元素被添加到DOM中：

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

请参阅Details HERE

Answer 5

$('#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');});
});

您无法竞标尚未存在的内容，因此请在点击后将其绑定到函数内部。选择器#testS vs #testSel

中有一个拼写错误

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

5 个答案: