javascript - 加载后生成的 dom 元素上的 .change() 函数

Question

我试图在 dom 生成之后添加的选择上捕获 change()，但我无法成功。这是一个示例代码:

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

我想在更改选择中的值时看到警报..

这是一个 fiddle 。 http://jsfiddle.net/T8J8p/3/

Answer 1

两个问题:

1. 您的 select 元素的 ID 是 #testS 而不是 #testSel。¹
2. 您需要使用 event delegation为此，通过 jQuery 的 on() 方法:

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

JSFiddle demo .

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

---

^{1。这与问题中的原始 JSFiddle 有关(可用 here )。该问题已被编辑。}