我有一段代码，我循环浏览页面上的所有选择框，并将一个悬停事件绑定到它们上，以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生，工作正常。
我遇到的问题是，在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件（jQuery Live Query插件），但在我用插件向我的页面添加另一个5k之前，我想看看是否有人知道这样做的方法，无论是直接使用jQuery还是通过另一个选项。
当前回答
我更喜欢使用选择器，并将其应用于文档。
这将自身绑定到文档上，并将适用于页面加载后呈现的元素。
例如：
$(document).on("click", 'selector', function() {
// Your code here
});
其他回答
这是一个没有任何库或插件的纯JavaScript解决方案：
document.addEventListener('click', function (e) {
if (hasClass(e.target, 'bu')) {
// .bu clicked
// Do your thing
} else if (hasClass(e.target, 'test')) {
// .test clicked
// Do your other thing
}
}, false);
其中hasClass是
function hasClass(elem, className) {
return elem.className.split(' ').indexOf(className) > -1;
}
现场演示
Dave和Sime Vidas的功劳
使用更现代的JS，hasClass可以实现为：
function hasClass(elem, className) {
return elem.classList.contains(className);
}
下面嵌入了相同的jsfiddle Live演示：
函数hasClass（elem，className）{return elem.classList.contains（className）；}document.addEventListener（'click'，函数（e）{if（hasClass（e.target，'bu'））{警报（'bu'）；document.querySelector（'.bu'）.innerHTML='<div class=“bu”>bu<div class=”tu“>tu</div></div>'；}else if（hasClass（e.target，'test'））{警报（“测试”）；}否则if（hasClass（e.target，'tu'））{警报（'tu'）；}}，假）；测验.bu，.tu文件{边框：1px实心灰色；填充：10px；边距：10px；}<div class=“test”>测试<div class=“bu”>bu</div>测试</div>
你可以使用
$('.buttons').on('click', 'button', function(){
// your magic goes here
});
or
$('.buttons').delegate('button', 'click', function() {
// your magic goes here
});
这两种方法是等效的，但具有不同的参数顺序。
请参见：jQuery委托事件
尝试使用.live（）代替.bind（）；在Ajax请求执行后，.live（）将把.holl绑定到您的复选框。
我更喜欢以模块化函数的方式部署事件侦听器，而不是编写文档级事件侦听器的脚本。所以，我喜欢下面。注意，您不能使用同一个事件侦听器超额订阅某个元素，因此不要担心多次附加侦听器-只需一个侦听器。
var迭代=4；var按钮；var body=document.querySelector（“body”）；for（var i=0；i<迭代次数；i++）{button=document.createElement（“button”）；button.classList.add（“我的按钮”）；button.appendChild（document.createTextNode（i））；button.addEventListener（“单击”，myButtonWasClicked）；body.appendChild（按钮）；}函数myButtonWasClicked（e）{console.log（e.target）//访问此特定按钮}
您可以简单地将事件绑定调用包装成一个函数，然后调用它两次：一次在文档就绪时调用，一次在添加新DOM元素的事件之后调用。如果这样做，您将希望避免在现有元素上绑定同一事件两次，因此您需要解除现有事件的绑定，或者（更好）只绑定到新创建的DOM元素。代码看起来像这样：
function addCallbacks(eles){
eles.hover(function(){alert("gotcha!")});
}
$(document).ready(function(){
addCallbacks($(".myEles"))
});
// ... add elements ...
addCallbacks($(".myNewElements"))
