javascript - 将事件侦听器附加到动态元素

Question

可能重复：
jQuery 1.7 - 将 live() 变成 on()

我曾经很喜欢.live()jQuery 的功能。您将添加它，瞧，任何与标识符匹配的未来元素都将具有该功能。

然后它被弃用了，建议使用.on(). 但它不起作用。下面是我放置在$(document).ready().

这有效

$('#membership_number').live('change',function(e) {
    alert("VALUE CHANGED");
});

这不

$('#membership_number').on('change',function(e) {
    alert("VALUE CHANGED");
});

有没有其他方法可以达到与我相同的效果，.live()或者我只是没有.on()正确使用？

score 5 · Accepted Answer

您必须将事件订阅到父项并提供要绑定的选择器。如果您不想给父母，您可以使用文档。阅读更多关于这里

$(document).on('change', '#membership_number',function(e) {
    alert("VALUE CHANGED");
});

或者

$('#parentId').on('change', '#membership_number',function(e) {
    alert("VALUE CHANGED");
});

score 2 · Accepted Answer

在 jQuery 1.7 + 中处理动态元素时，您使用的是 on 选择器。它期望事件绑定到在页面加载时准备就绪且可用的静态元素，因此事件可以正确地在链中冒泡并在找到父元素时触发。

$(document).on('change', '#membership_number', function(e){
    alert("VALUE CHANGED");
});

score 2 · Accepted Answer

您需要使用父元素来附加处理程序。例如文档。

$(document).on('change', '#membership_number', function(e) {
    alert("VALUE CHANGED");
});

score 2 · Accepted Answer

.on()由于事件冒泡直到匹配选择器的方式，您需要在祖先元素处绑定。这可以是 DOM 中的任何东西，它是您希望事件绑定到的元素的祖先。

您当然可以使用终极祖先，document. 例如：

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

.live()实际上是通过在其上绑定一个事件在幕后完成的document，然后在正确的元素上进行过滤。使用尽可能本地的元素来进行活动会更有效和实用。例如，如果我想在动态添加<li>一些元素的元素上单击事件<li>，我会将事件绑定到父级<ul>并进行过滤，<li>如下所示：

$('ul').on('click', 'li', function(){});

这也比在每个<li>.

4 回答 4