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

Question

我有一個動態加載內容的簡單頁面。 我使用jQuery加載函數將內容附加到div。 加載函數從另一個文件加載內容。 我遇到的問題是，在內容加載后，我構建的jQuery函數沒有響應click事件。

為了證明它的工作原理，我包含了內容，在DOM加載后它完美地運行。 需要幫助。

Answer 1

當你做這樣的事情：

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

...只有已經在DOM中的元素才會被選擇器匹配並將其click事件連接起來; 如果您以后添加元素會選擇匹配，它們將不會自動后-事實上迷上了。

您可以使用事件委派來使用delegate或（使用較新版本的jQuery）自動連接它們之一的on變體：

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

（注意，參數的順序在兩者之間略有不同。）

使用事件委托，真正發生的是jQuery掛鈎click 容器 ，當點擊冒泡到容器時，它會檢查事件所用的路徑，以查看中間的任何元素是否與選擇器匹配。 如果是這樣，它會觸發處理程序，就像你將它連接到元素一樣，即使它實際上是掛在容器上。

具體例子：

<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

正如您在jQuery的文檔中看到的 ：

通常，當您使用$（'a'）向所有鏈接添加點擊（或其他事件）處理程序時，單擊（fn），您會發現在將新內容加載到a中之后事件不再有效使用AJAX請求的頁面。

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

您有兩種處理方式：

使用事件委托

事件委托是一種利用事件冒泡來捕獲DOM中任何位置的元素上的事件的技術。

從jQuery 1.3開始，您可以使用live和die方法將事件委托與事件類型的子集一起使用。 從jQuery 1.4開始，您可以使用這些方法（以及從1.4.2開始的委托和undelegate）進行事件委派，幾乎可以使用任何事件類型。

對於早期版本的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);
});

Answer 3

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