我有一些代碼，我循環(huán)遍歷頁面上的所有選擇框，并將 .hover 事件綁定到它們，以在 mouse on/off 上對其寬度進行一些調(diào)整。
這發(fā)生在頁面準備好并且工作正常。
我遇到的問題是，在初始循環(huán)之后通過 Ajax 或 DOM 添加的任何選擇框都不會綁定事件。
我已經(jīng)找到了這個插件（jQuery Live Query Plugin），但是在我使用插件向我的頁面添加另一個 5k 之前，我想看看是否有人知道如何做到這一點，無論是直接使用 jQuery 還是通過其他選項。
2
0
0
jQuery.fn.on 的文檔中有很好的解釋。
簡而言之：
因此在下面的示例中 #dataTable tbody tr 在生成代碼之前必須存在。
$("#dataTable tbody tr").on("click", function(event){
console.log($(this).text());
});
如果新的 HTML 被注入到頁面中，最好使用委托事件來附加事件處理程序，如下所述。
委托事件的優(yōu)點是它們可以處理來自稍后添加到文檔中的后代元素的事件。例如，如果表存在，但使用代碼動態(tài)添加行，則以下內(nèi)容將處理它：
$("#dataTable tbody").on("click", "tr", function(event){
console.log($(this).text());
});
除了能夠處理尚未創(chuàng)建的后代元素上的事件之外，委托事件的另一個優(yōu)點是，當必須監(jiān)視許多元素時，它們可能會降低開銷。在 tbody 中有 1,000 行的數(shù)據(jù)表上，第一個代碼示例將處理程序附加到 1,000 個元素。
委托事件方法（第二個代碼示例）僅將事件處理程序附加到一個元素 tbody，并且該事件只需要向上冒泡一級（從單擊的 tbody 到 tbody）。
注意：委托事件不適用于SVG。
從 jQuery 1.7 開始，您應該使用 jQuery.fn.on 并填充選擇器參數(shù)：
$(staticAncestors).on(eventName, dynamicChild, function() {});
說明：
這稱為事件委托，其工作原理如下。該事件附加到應處理的元素的靜態(tài)父級 (staticAncestors)。每次在此元素或后代元素之一上觸發(fā)事件時，都會觸發(fā)此 jQuery 處理程序。然后，處理程序檢查觸發(fā)事件的元素是否與您的選擇器匹配（dynamicChild）。當存在匹配時，就會執(zhí)行您的自定義處理程序函數(shù)。
在此之前，推薦的方法是使用 live()：
$(selector).live( eventName, function(){} );
但是，live() 在 1.7 中已被棄用，取而代之的是 on()，并在 1.9 中完全刪除。 live()簽名：
$(selector).live( eventName, function(){} );
...可以替換為以下on()簽名：
$(document).on( eventName, selector, function(){} );
例如，如果您的頁面動態(tài)創(chuàng)建類名為 dosomething 的元素，您可以將事件綁定到已經(jīng)存在的父級（這是問題的核心，您需要一些東西存在綁定到，不綁定到動態(tài)內(nèi)容），這可以（也是最簡單的選項）是 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
});
適用于
