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

Question

我试图在dom生成后添加的select上捕获一个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');
});

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

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

Answer 1

两个问题:

1. 你select元素的ID #testS不是#testSel.¹
2. 你需要通过jQuery的方法为此使用事件委托on():

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

JSFiddle演示.

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

^{1.这与问题中的原始JSFiddle有关(可在此处获得).这个问题已被编辑.}