2014-04-10 27 views
0

首先讓我說這讓我感到痛苦不已,而且我盡我所能去尋找資源並掌握爲什麼會發生這種情況。.on().off()事件冒泡問題(很困惑......)

  1. 我有一個瀏覽AJAX的文件瀏覽器。
  2. 當我加載一個新目錄時,我必須重新初始化事件處理程序
  3. 當我更改目錄時,它會堆疊。

所以,如果我去說files/../files/..回到根(兩次),它會觸發4次。

我試圖解除綁定與.off(),我試着.one()限制,我已經嘗試重置所有結合與$(document).find('*').off()與特定事件,我已經試過e.stopPropagation();

似乎沒有任何工作。這讓我瘋狂。如果我不重新初始化系統,通過AJAX加載的新內容不會收到綁定。如果我這樣做,它會堆疊。請幫忙!

//previous method 
file.on('click',dothis); 
//method that actually works 
files.on('click','a',dothis); 
+1

如果您使用事件委託,則不需要重新初始化事件處理程序。 – Barmar

+3

請張貼演示問題的最少量代碼。 – Barmar

+1

查看http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar

回答

1

而不是試圖清除所有的事件處理程序,然後重新安裝的一切,還有兩個更清潔的方式來解決你的問題:

  1. 可以reinitalize只有新加載HTML,所以你不要」在現有內容上獲取任何雙重事件處理程序。通常的做法是通過將選擇器放在選擇器的開始位置或將其作爲上下文(第二個參數)傳遞給新的內容的父對象,將選擇器的範圍添加到新內容的父對象中。

  2. 您可以切換到使用一個靜態的,共同的父委託的事件處理程序,這樣你就不必在所有初始化事件處理程序,即使是動態內容。

對委託事件處理,你可以使用事件處理這種形式的:

$("some static parent selector").on("click", "child object selector", fn); 

靜態家長選擇需要不能動態加載本身和動態內容需要被它的孩子。您甚至可以爲靜態父級使用$(document),但是選擇更接近動態內容的父級更好(用於事件路由的效率)。

這裏是委託事件處理的幾個常用參考:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

Should all jquery events be bound to $(document)?

JQuery Event Handlers - What's the "Best" method


只reinitalizing新加載HTML,你可以用新加載內容的父對象前綴您選擇:

$("#parentOfDynamicContent .myAnchors").on("click", fn); 

或者,像這樣:

$("#parentOfDynamicContent").find(".myAnchors").on("click", fn); 
0

你確定你設置.on()您的插入元素父? on()在設置之前不會監聽插入的元素,您需要將其設置爲DOM父項。

代碼會有幫助,也許只是你設置的地方on()off()和一些基本的html結構。

實例:

$('#parent').on('click', 'a', function(e) { 

}); 

這將偵聽所有點擊的內部#parenta元件。