javascript在动态创建的元素上进行事件绑定？

Question

这个问题的答案是 社区的努力。编辑现有答案以改善此职位。它目前不接受新的答案或互动。

我有一些代码，在其中循环浏览页面上的所有选择框，并将.hover事件绑定到它们上，以使它们的宽度变窄mouse on/off。

这在页面准备就绪时发生，并且工作正常。

我的问题是，在初始循环之后，我通过Ajax或DOM添加的所有选择框都没有事件绑定。

我已经找到了这个插件（[jQuery Live Query
Plugin](），但是在我使用插件向页面添加另一个5k之前，我想看看是否有人知道直接使用jQuery或通过其他方法做到这一点的方法。

Answer 1

从jQuery 1.7开始， 您应该使用[jQuery.fn.on]：

$(staticAncestors).on(eventName, dynamicChild, function() {});

在此之前 ，推荐的方法是使用live()：

$(selector).live( eventName, function(){} );

但是，live()在1.7中弃用on()，而在1.9中完全删除了。该live()签名：

$(selector).live( eventName, function(){} );

…可以替换为以下on()签名：

$(document).on( eventName, selector, function(){} );

例如，如果您的页面正在使用类名动态创建元素，则dosomething可以将事件绑定到 已经存在的父级
（这是问题的小结，您需要绑定到现有的东西，而不要绑定到动态内容），则可以（也是最简单的选择）是document。尽管记住[document可能不是最有效的选择]。

$(document).on('mouseover mouseout', '.dosomething', function(){
    // what you want to happen when mouseover and mouseout 
    // occurs on elements that match '.dosomething'
});

绑定事件时存在的任何父项都可以。例如

$('.buttons').on('click', 'button', function(){
    // do something here
});

适用于

<div class="buttons">
    <!-- <button>s that are generated dynamically and added here -->
</div>