我有一段代码，我循环浏览页面上的所有选择框，并将一个悬停事件绑定到它们上，以便在鼠标打开/关闭时对它们的宽度进行一些微调。
这在页面就绪时发生，工作正常。
我遇到的问题是，在初始循环之后通过Ajax或DOM添加的任何选择框都不会绑定事件。
我已经找到了这个插件（jQuery Live Query插件），但在我用插件向我的页面添加另一个5k之前，我想看看是否有人知道这样做的方法，无论是直接使用jQuery还是通过另一个选项。
当前回答
这是通过事件委派完成的。事件将在包装器类元素上获得绑定，但将被委托给选择器类元素。这就是它的工作原理。
$('.wrapper-class').on("click", '.selector-class', function() {
// Your code here
});
和HTML
<div class="wrapper-class">
<button class="selector-class">
Click Me!
</button>
</div>
#注：包装器类元素可以是任何东西，例如文档、主体或包装器。包装应该已经存在。然而，选择器不一定需要在页面加载时显示。它可能会在稍后出现，并且事件将毫无失败地绑定到选择器上。
其他回答
jQuery.fn.on的文档中有一个很好的解释。
简而言之：
事件处理程序仅绑定到当前选定的元素；它们必须在代码调用.on（）时存在于页面上。
因此，在下面的示例#dataTable中，生成代码之前必须存在tbodytr。
$("#dataTable tbody tr").on("click", function(event){
console.log($(this).text());
});
如果新的HTML被注入到页面中，最好使用委托事件来附加事件处理程序，如下所述。
委派事件的优点是，它们可以处理来自后代元素的事件，这些后代元素稍后会添加到文档中。例如，如果表存在，但行是使用代码动态添加的，下面将处理它：
$("#dataTable tbody").on("click", "tr", function(event){
console.log($(this).text());
});
除了处理尚未创建的后代元素上的事件的能力之外，委托事件的另一个优点是，当必须监视许多元素时，它们可以大大降低开销。在tbody中有1000行的数据表上，第一个代码示例将处理程序附加到1000个元素。
委托事件方法（第二个代码示例）只将事件处理程序附加到一个元素tbody，并且事件只需要向上冒泡一个级别（从单击的tr到tbody）。
注意：委派事件不适用于SVG。
将事件绑定到已存在的父级：
$(document).on("click", "selector", function() {
// Your code here
});
从jQuery 1.7开始，您应该使用jQuery.fn.on并填充选择器参数：
$(staticAncestors).on(eventName, dynamicChild, function() {});
说明：
这称为事件委派，其工作方式如下。事件附加到应该处理的元素的静态父级（staticAncestors）。此jQuery处理程序在每次事件触发此元素或子元素之一时都会触发。然后，处理程序检查触发事件的元素是否与选择器（dynamicChild）匹配。如果匹配，则执行自定义处理程序函数。
在此之前，建议使用live（）：
$(selector).live( eventName, function(){} );
然而，live（）在1.7中被弃用，而在1.9中被完全删除。live（）签名：
$(selector).live( eventName, function(){} );
…可以替换为以下on（）签名：
$(document).on( eventName, selector, function(){} );
例如，如果您的页面正在动态创建类名为dosomething的元素，那么您可以将事件绑定到已经存在的父级（这是问题的症结所在，您需要绑定到现有的元素，而不是绑定到动态内容），这可以是文档（也是最简单的选项）。尽管记住文档可能不是最有效的选择。
$(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>
以下是动态创建的元素不响应点击的原因：
var body=$（“body”）；var btns=$（“按钮”）；var btnB=$（“<button>B</button>”）；//“＜button＞B＜/button＞”尚未在文档中。//因此，`$（“button”）`给出`[<button>A</button>]`。//只有“＜button＞A＜/button＞”才能获得单击侦听器。btns.on（“单击”，函数（）{console.log（此）；});//太迟了`<button>B</button>`。。。body.append（btnB）；<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>A</button>
作为一种解决方法，您必须聆听所有单击并检查源元素：
var body=$（“body”）；var btnB=$（“<button>B</button>”）；var btnC=$（“＜button＞C＜/button＞”）；//聆听所有点击和//检查源元素//是“＜button＞＜/button＞”。body.on（“单击”，函数（ev）{如果（$（ev.target）.is（“按钮”））{console.log（ev.target）；}});//现在您可以添加任何数字//“＜button＞＜/button＞”。body.append（btnB）；body.append（btnC）；<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>A</button>
这被称为“事件委派”。好消息，这是jQuery中的内置功能：-）
变量i=11；var body=$（“body”）；body.on（“单击”、“按钮”、函数（）{var letter=（i++）.toString（36）.toUpperCase（）；body.append（$（“＜button＞”+letter+“＜/button＞”））；});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><button>A</button>
<html>
<head>
<title>HTML Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="hover-id">
Hello World
</div>
<script>
jQuery(document).ready(function($){
$(document).on('mouseover', '#hover-id', function(){
$(this).css('color','yellowgreen');
});
$(document).on('mouseout', '#hover-id', function(){
$(this).css('color','black');
});
});
</script>
</body>
</html>
