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

Question

  

可能重复：
  jQuery 1.7 - Turning live() into on()

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

然后它被弃用了，建议使用.on()。但它不起作用。以下是放在$(document).ready()中的代码。

此作品

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

这不是

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

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

Answer 1

您必须将事件订阅到父项并将选择器指定给您要绑定的选择器。如果您不想给父母，您可以使用文件。详细了解 here

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

或

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

你当然可以使用最终的祖先document。例如：

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

.live()实际上是通过在document上绑定事件然后在正确的元素上进行过滤来在幕后完成的。将元素尽可能地放在想要事件的元素上是更有效和实用的。例如，如果我想要<li>个元素上的点击事件动态添加一些<li>，我会将事件绑定到父<ul>和过滤器上<li>喜欢这样：

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

这比在每个<li>上绑定单独的点击事件更有效。