動態元素事件綁定：如何將事件綁定到動態建立的元素？

Question

我有一些程式碼，我循環遍歷頁面上的所有選擇框，並將.hover事件綁定到它們，以在mouseon/off上對其寬度進行一些調整。這發生在頁面準備好並且工作正常。我遇到的問題是，在初始循環之後透過Ajax或DOM添加的任何選擇框都不會綁定事件。我已經找到了這個插件（jQueryLiveQueryPlugin），但是在我使用插件向我的頁面添加另一個5k之前，我想看看是否有人知道如何做到這一點，無論是直接

P粉864594965 · Answer

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，並且該事件只需要向上冒泡一級（從單擊的tbody 到tbody）。

注意：委託事件不適用於SVG。 < /p>

P粉722409996 · Answer

從 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
});

適用於

動態元素事件綁定：如何將事件綁定到動態建立的元素？

全部回覆(2)我來回復