2012-10-31 98 views
1

基本上我試圖通過解綁元素來優化我的jQuery代碼,任何時候都是必要的,或者我需要重新綁定它們,但是我有一個問題,「摧毀」一個元素是否也會破壞附加到該元素的事件?銷燬一個元素會銷燬該元素上的綁定?

$(element).bind("click", function(){...}); 
$(element).parent().html(""); 

而且我不知道如果這是以.html(「」)來完成,我必須用一個.remove()這樣的伎倆?

回答

2

只要你使用jQuery方法添加/刪除元素並綁定事件,一切都應該沒問題。當你將一個事件綁定到一個元素上(或者使用類似於.data()的東西)時,jQuery將這些信息存儲在一個叫做$.cache的地方。當你使用jQuery方法來操作DOM時,jQuery負責清理這些東西 - 因爲在元素和$.cache之間確實沒有實際的連接。因此,如果您在頁面中添加了div,則使用jQuery綁定click事件,然後使用node.parentNode.removeChild(node);刪除它,$.cache未清理。如果你想的證據,看在jQuery的源像htmlremovereplaceWith方法以及類似的,你會發現這樣的電話:

jQuery.cleanData(elem.getElementsByTagName("*")); 
jQuery.cleanData([ elem ]); 

這有效地清理$.cache使一切已搞定。關鍵是,如果你使用圖書館來處理(所有),你就不必擔心這些事情。

使用html雖然很棘手 - 要小心你傳遞給它的東西。如果你想傳遞一個新的DOM結構,像

var div = $("<div>") 
       .attr("id", "div1") 
       .click(function() { 
        alert("clicked"); 
       }); 

使用類似$("#container").html(div);實際上不會綁定該點擊事件處理程序。雖然使用類似.append的東西。只是想指出。 (這與摧毀/刪除元素無關)

+1

真棒答案和有趣的順便說一句,是啊我知道綁定事件只適用於綁定完成時存在的元素;這就是爲什麼我重新加載時解除綁定元素的原因,這次的問題是當我有這麼多元素更好地清空或銷燬父元素而不是解除綁定200個元素。如果我有任何問題,我會嘗試您的解決方案併發布。謝謝! –

1

如果您刪除該元素,DOM將不再監聽該元素內的點擊。

.remove應該做的伎倆。

$(element).parent().remove(); 

將從DOM中刪除元素。

+0

順便說一句,您的應用/網站有多大? –

+0

'$(element).parent()。remove();'移除父 - 你不想這樣做。 '$(element).remove()'會工作得很好。 – Ian

+1

'.on' /'.bind'的評論完全是題外話......而IMO則沒有回答這個問題。是的,如果你用'.html'移除一個元素,那麼它不能再觸發事件,但事件監聽器是否仍然存在? –