jQuery的.delegate和動態內容

我有以下HTML：jQuery的.delegate和動態內容

<ul class="ulclass"> 
    <li class="liclass"> 
     ...some more nesting 
      <a href="somelink">somelink</a> 
     ....close nesting 
    </li> 
    <li class="liclass"> 
    ... 

</ul>

有從類「liclass」各立一個點擊事件，所以我停止從與錨冒泡（大概<div>是.liclass內）：

$(".liclass div").delegate("a", "click", function(e) { 
      e.stopPropagation();   
});

現在我添加使用Ajax .load更<li class="liclass">。 stopPropagation適用於靜態「.liclass」，但不適用於動態添加。假設在加載頁面時存在<ul class="ulclass">的代碼。您能否讓我知道如何更改.delegate以停止動態添加的.liclass冒泡。

來源

2011-12-04 user1073201

將另一個委託處理程序放在任何包含動態創建的元素（在本例中爲ul）的地方以停止傳播。

$("ul.ulclass").delegate(".liclass div", "click", function(e) { 
      e.stopPropagation();   
}); 

$("ul.ulclass").delegate(".liclass", "click", function(e) { 
      // main code for each li element  
});

因爲他們是在相同的元素都委託方法，該e.stopPropagation()應努力防止即使該事件已冒泡的處理程序。

JSFIDDLE DEMO

更新的演示來顯示它與動態元素的工作。

另一種方法是簡單地直接結合處理程序應用到動態創建div元件。

因此，如果您使用的是，我假設您正在清除舊內容並將其替換爲新內容。在這種情況下，在回調中，只需選擇div，然後重新綁定處理程序。

$("ul.ulclass").load('/whatever/', function() { 
     // shortcut to binding a handler with stopPropagation and preventDefault 
    $(this).find('li.liclass div').bind('click', false); 
});

來源

2011-12-04 13:25:16 RightSaidFred

還是沒什麼，冒泡不停。您的DEMO不使用.load。再一次，當我的舊代碼工作正常時，一切都是靜態的，但一旦我開始使用.load它打破。 – user1073201

@ user1073201：我的代碼不使用加載的事實應該不重要。如果您向'ul'添加新元素，它們的行爲與原始行爲相同。 [這是一個例子]（http://jsfiddle.net/DPq9W/1/），它可以動態地添加新元素2秒。他們的行爲與原始行爲相同。 – RightSaidFred

感謝您的幫助。動態添加新元素的行爲不如原來的（證明是我的問題）。我可以看到你的演示程序運行良好，但是，我仍然無法讓我的代碼正常工作。這個問題可能是因爲我有這種嵌套（.liclass和錨點之間有一堆div和table標籤）？ – user1073201

您需要在每個ajax請求完成後調用「.delegate」以使其工作。

來源

2011-12-04 13:25:27 ComputerSaysNo

如果您正在使用最新版本的jQuery的，正確的代碼是：

$(document).on("click", ".liclass a", function(e) { 
    e.stopPropagation();   
});

來源

2011-12-04 13:36:36

它不起作用。我想你忘記了.liclass是動態加載的。我想我必須用父類.ulclass以某種方式連接事件，當頁面加載時，它是在那裏，但我不知道如何。 – user1073201

嗯，它應該工作，因爲聽衆被添加到文檔。該版本適用於jQuery 1.7.1。例如：[jsfiddle]（http://jsfiddle.net/NbhfN/） –

但我確實使用jquery 1.7.1。 – user1073201

事件委託是指：已起泡到一個「更高水平」元素的事件。不可能再停止傳播到這個元素（因爲它已經發生了）。傳播只能在層次結構中更高的元素停止。如果您已經將代理綁定到「文檔」，它根本無法工作。

來源

2011-12-04 13:46:56 devnull69

jQuery的.delegate和動態內容

回答

相關問題