動態建立的元素上的事件綁定？

Question

我有一些程式碼，我循環遍歷頁面上的所有選擇框並將.hover 事件綁定到它們，以在 滑鼠上調整它們的寬度開啟/關。

這發生在頁面準備好並且正常運作。

我遇到的問題是，在初始循環之後透過 Ajax 或 DOM 新增的任何選擇框都不會綁定事件。

我已經找到了這個插件（jQuery Live Query Plugin），但是在我使用插件向我的頁面添加另一個5k 之前，我想看看是否有人知道如何做到這一點，無論是直接使用jQuery還是透過其他選項。

Answer 1

jQuery.fn.on 的文檔中有很好的解釋一个>.

簡而言之：

因此，在下面的範例中，#dataTable tbody tr 在產生程式碼之前必須存在。

$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});

如果新的 HTML 被注入到頁面中，最好使用委託事件來附加事件處理程序，如下所述。

委託事件的優點是它們可以處理來自稍後新增到文件中的後代元素的事件。例如，如果表存在，但使用程式碼動態新增行，則以下內容將處理它：

$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});

除了能夠處理尚未創建的後代元素上的事件之外，委託事件的另一個優點是，當必須監視許多元素時，它們可能會降低開銷。在 tbody 中有 1,000 行的資料表上，第一個程式碼範例將處理程序附加到 1,000 個元素。

委託事件方法（第二個程式碼範例）僅將事件處理程序附加到一個元素，即tbody，且事件只需要向上冒泡一層（從點擊的 tr 到tbody）。

注意：委託事件不適用於SVG。

Answer 2

從 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>