jQuery.on（）是否適用於在創建事件處理程序之後添加的元素？

Question

我一直在這個印象之下，.on()像.live()一樣工作，關於動態創建的元素（例如我使用$('.foo').on('click', function(){alert('click')});，然後由於某些AJAX創建類foo的元素，現在我期待點擊那個元素導致警報）。在實踐中，這些不是我得到的結果。我可能會犯一個錯誤，但有人可以幫我理解新的的方式來實現這些結果，在.on()之後？

在此先感謝。

Answer 1

.on()如果使用得當，可以動態創建元素。 jQuery doc做了很好的描述。

使用它的動態元素的方法是使用這種形式：

$("static selector").on('click', "dynamic selector", fn); 

靜態選擇必須解決的一些對象，既您的動態對象的祖先，是靜態的存在 - 當你運行這一行代碼，不會被刪除或重新創建。

動態選擇器是一個與您的動態元素相匹配的選擇器。在事件處理程序首次安裝時，它們不必存在，它們可以隨時隨地來去。

因此，如果"#container"與靜態祖先匹配，並且".foo"與您希望單擊處理程序的動態元素匹配，則可以使用此操作;

$("#container").on("click", ".foo", fn); 

如果你真的想了解它，這是多麼的.on()作品委派的事件處理。當您調用上述.on()調用時，它會將一個單擊事件處理程序附加到#container對象。稍後，當您單擊一個.foo對象時，實際的.foo對象上沒有單擊處理程序，因此點擊會在祖先鏈上起泡。當點擊進入#container對象時，會有一個點擊處理程序，jQuery將查看該處理程序，並看到該處理程序僅適用於原始點擊的對象與選擇器".foo"匹配的對象。它測試事件目標以查看它是否匹配該選擇器，如果是，它會爲它調用事件處理程序。

（已棄用）.live()方法通過將所有事件處理程序附加到文檔對象來工作。由於文檔對象是文檔中每個對象的祖先，因此他們通過這種方式獲得了委託事件處理。所以，在上面的例子中，這兩者是等價的：

$(document).on("click", ".foo", fn); 
$(".foo").live("click", fn); 

但是，附着在文檔中的所有委託的事件處理程序有時會產生嚴重的性能瓶頸，使jQuery的決定，這是一個糟糕的方式做到這一點，這是更好要求開發者指定一個有希望比文檔對象更接近實際目標對象的靜態祖先。

Answer 2

我想你面臨着類似的情況，我面臨。這對於綁定事件與稍後生成的元素來說是一個很好的解決方案。

Binding Jquery Events On Elements Generated Through Other Events