我有一段代码，我循环浏览页面上的所有选择框，并将一个悬停事件绑定到它们上，以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生，工作正常。
我遇到的问题是，在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件（jQuery Live Query插件），但在我用插件向我的页面添加另一个5k之前，我想看看是否有人知道这样做的方法，无论是直接使用jQuery还是通过另一个选项。
当前回答
你可以使用
$('.buttons').on('click', 'button', function(){
// your magic goes here
});
or
$('.buttons').delegate('button', 'click', function() {
// your magic goes here
});
这两种方法是等效的，但具有不同的参数顺序。
请参见：jQuery委托事件
其他回答
将事件绑定到已存在的父级：
$(document).on("click", "selector", function() {
// Your code here
});
您可以简单地将事件绑定调用包装成一个函数，然后调用它两次：一次在文档就绪时调用，一次在添加新DOM元素的事件之后调用。如果这样做，您将希望避免在现有元素上绑定同一事件两次，因此您需要解除现有事件的绑定，或者（更好）只绑定到新创建的DOM元素。代码看起来像这样：
function addCallbacks(eles){
eles.hover(function(){alert("gotcha!")});
}
$(document).ready(function(){
addCallbacks($(".myEles"))
});
// ... add elements ...
addCallbacks($(".myNewElements"))
尝试使用.live（）代替.bind（）；在Ajax请求执行后，.live（）将把.holl绑定到您的复选框。
另一种创建元素和绑定事件的灵活解决方案（源代码）
// creating a dynamic element (container div)
var $div = $("<div>", {id: 'myid1', class: 'myclass'});
//creating a dynamic button
var $btn = $("<button>", { type: 'button', text: 'Click me', class: 'btn' });
// binding the event
$btn.click(function () { //for mouseover--> $btn.on('mouseover', function () {
console.log('clicked');
});
// append dynamic button to the dynamic container
$div.append($btn);
// add the dynamically created element(s) to a static element
$("#box").append($div);
注意：这将为每个元素创建一个事件处理程序实例（在循环中使用时可能会影响性能）
另一种解决方案是在创建元素时添加侦听器。不是将监听器放在主体中，而是在创建元素的瞬间将监听器放入元素中：
var myElement = $('<button/>', {
text: 'Go to Google!'
});
myElement.bind( 'click', goToGoogle);
myElement.append('body');
function goToGoogle(event){
window.location.replace("http://www.google.com");
}
