DOM在加載函數後沒有響應jquery evers

Question

我有一個簡單的頁面來動態加載內容。 我使用jQuery加載函數將內容附加到div。加載函數從另一個文件加載內容。 我遇到的問題是，內容加載後，我建立的jQuery功能沒有響應點擊事件。

爲了證明它的工作原理，我包含了內容，並且在DOM加載之後它完美地工作。需要幫助。

Answer 1

當你做這樣的事情：

$("selector").click(function() { ... }); 

......只有那些在DOM已經將選擇相匹配，並有自己的單擊事件掛鉤的元素;如果您以後添加的元素會有匹配選擇器，它們將不會自動掛鉤。

您可以使用事件代表團看似勾起來使用自動delegate或（使用jQuery的新版本）的on變體之一：

$("container_for_elements").delegate("selector", "click", function() { ... })); 
$("container_for_elements").on("click", "selector", function() { ... })); 

（注意參數的順序是略有不同兩項）。

隨着事件的代表團，到底發生了什麼是jQuery的的容器在鉤子上click，當點擊冒泡的容器，它會檢查事件發生，看看是否有T的路徑他中間的元素與選擇器匹配。如果是這樣，它會像處理該元素一樣觸發處理程序，即使它實際上掛在了容器上。

具體的例子：

<div id="container"> 
    <span>One</span> 
    <span>Two</span> 
    <span>Three</span> 
</div> 

如果我們這樣做：

$("#container").delegate("span", "click", function() { 
    console.log($(this).text()); 
}); 

...然後單擊跨度中的一個將顯示其內容，如果我們做到這一點：

$("#container").append("<span>Four</span>"); 

...該跨度將自動處理，因爲事件處理程序在容器上，然後在發生事件時檢查選擇器，所以稍後添加元素並不重要。

Answer 2

因爲您在DOM完全加載後插入內容，所以您必須使用.on("click",function(){})來實現您的點擊功能，因爲當您綁定它們時，它們在DOM中不可用！

Answer 3

正如你可以看到jQuery's documentation：

通常情況下，當您添加使用$（「A」）點擊（或其他事件）處理程序的所有鏈接點擊（FN），你會發現在使用AJAX請求將新內容加載到頁面後，事件不再有效。

當您調用$（'a'）時，它會在調用時返回頁面上的所有鏈接，而.click（fn）將您的處理程序僅添加到這些元素。當添加新鏈接時，它們不受影響。請參閱AJAX和活動教程進行更長時間的討論。

你必須處理這兩種方式：

使用事件代表團

事件代表團是利用事件冒泡來捕獲的DOM元素的任何地方事件的技術。

從jQuery 1.3開始，您可以使用活動和死亡方法進行事件委派，並使用事件類型的子集。從jQuery 1.4開始，您可以使用這些方法（與1.4.2中的委託和取消開始一起）用於幾乎任何事件類型的事件委派。

對於早期版本的jQuery，請看Brandon Aaron的Live Query插件。您也可以手動處理事件委派，方法是綁定到一個公共容器並從那裏收聽事件。例如：

$('#mydiv').click(function(e){ 
    if($(e.target).is('a')) 
     fn.call(e.target,e); 
}); 
$('#mydiv').load('my.html'); 

這個例子將處理#mydiv內的任何元素的點擊，即使添加單擊處理時還不存在的話。

使用事件重新綁定

這種方法需要調用新的元素綁定方法，因爲它被添加。例如：

$('a').click(fn); 
$('#mydiv').load('my.html',function(){ 
    $('#mydiv a').click(fn); 
});