动态创建的元素上的事件绑定？

我有一些代码，我循环遍历页面上的所有选择框并绑定.hover事件让他们在宽度上做一些调整mouse on/off.

这发生在页面准备好并且工作得很好。

我遇到的问题是，在初始循环之后通过 Ajax 或 DOM 添加的任何选择框都不会绑定事件。

我找到了这个插件（jQuery 实时查询插件），但在我使用插件向我的页面添加另一个 5k 之前，我想看看是否有人知道一种方法来做到这一点，无论是直接使用 jQuery 还是通过其他选项。

从 jQuery 1.7 开始你应该使用jQuery.fn.on填充选择器参数：

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

解释：

这称为事件委托，其工作原理如下。该事件附加到静态父级（staticAncestors）应处理的元素。每次在此元素或后代元素之一上触发事件时，都会触发此 jQuery 处理程序。然后处理程序检查触发事件的元素是否与您的选择器匹配（dynamicChild）。当存在匹配时，就会执行您的自定义处理程序函数。

在此之前，推荐的方法是使用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>