JQuery - 如何将change()函数绑定到动态创建的<select>元素？

Question

我通过JS在DOM上创建元素。问题是，如何为每个新创建的元素分配.change()函数？

- Tony

Answer 1

从性能角度来看，比.live() 更好的选择是.delegate()。它与.live()的工作方式相同：使用事件冒泡，也就是当在DOM元素上触发事件时，其所有父级都会被通知该事件。但是， delegate 具有更好的语法和显著的性能优势。

$('#parentElement').delegate('select.yourSelectClass', 'change', function() {
    // do your processing here
});

#parentElement 可以是匹配所有你要添加的 select 元素的共同祖先元素的任何选择器。这可能是 document.body，但 DOM 树中可能会有另一个元素可以绑定到。

select.yourSelectClass 意味着此处理函数只会在带有类名为yourSelectClass 的 select 元素上触发。你可以更改此选择器以使用其他 jQuery 选择器语法。

- lonesomeday

Answer 2

让jQuery.live()成为你的朋友：

$('.yourSelectClass').live('change', function(event){
    // Handle the Change event here.
});

- Justin Niessner

---

是的，我刚看到了。我使用了 .on。 - Ben_Coding

Live存在性能问题。它监听整个DOM文档的变化，而delegate仅监听从父元素开始的DOM树中的变化。 - Najki

Answer 3

尝试使用live函数：http://api.jquery.com/live/

- Andrew Whitaker

Answer 4

使用jQuery live。(版本1.3或更高)

$(".classOfJSCreatedElements").live('change',
function(event){
//do stuff
});

如果你必须使用旧版本的jQuery，请使用livequery插件

来源：jQuery常见问题解答

- Adam