更改DOM元素是否會影響綁定的子元素？

我有一個觸摸屏頁面元素<div id="x">與形式幾個子元素：更改DOM元素是否會影響綁定的子元素？

<div id="x_1" style="certain_class" pid="1723464"></div> 
<div id="x_2" style="certain_class" pid="1723465"></div> 
<div id="x_3" style="certain_class" pid="1723466"></div> 
<div id="x_4" style="certain_class" pid="1723467"></div>

這些元素對它們設置一個jQuery touchstart綁定事件......現在，如果我改變這些子元素使用：

$("#x").html("<div id="x_1"></div><div id="x_2"></div><div id="x_3"></div><div id="x_4"></div>");

其改變這些子元素：

<div id="x_1"></div> 
<div id="x_2"></div> 
<div id="x_3"></div> 
<div id="x_4"></div>

爲什麼我似乎失去了對這些元素設置的touchstart綁定？是因爲我將父元素中的子元素渲染爲無效，從而導致綁定事件？

我是否應該通過父節點內的各個子元素逐個更改這些元素的額外參數，而不是在父節點上使用.html()方法？

任何幫助是極大的讚賞...

來源

2014-03-19 Eliseo d' Annunzio

是的，你絕對破壞了原有的部分，因此它們的處理程序。不要使用'.html（）'進行那種DOM操作。如果你想操縱元素，然後根據需要操縱它們。不要完全摧毀它們。 –

當您更換子元素，如你與.html() jQuery的方法做，那麼必須綁定到這些事件處理舊的DOM元素是完全去除，並在DOM不再。因此，這些元素上的事件處理程序就會消失。

您有幾種選擇：

停止更換元素。相反，只需修改它們，以便相同的元素保留在頁面中，從而它們的事件處理程序保持不變。
將.html()設置爲將新事件處理程序安裝到新元素後，重新附加事件處理程序。
使用附加到未銷燬/重新創建的父對象的委託事件處理。

我的第一選擇是停止替換元素，如果這是可行的。我不知道你想要發生什麼類型的變化，所以我不知道這是多麼簡單。

通常，委託事件處理是最優雅的解決方案。您只需將一個事件處理程序附加到父項，即使您銷燬並重新創建子項，它也會保持有效。在這種情況下，這裏是應該做的一個方法：

$("#x").on("touchstart", "[id^='x_']", function(e) { 
    // event handler code here 
    // the this pointer will point to the origional DOM object that caused the event 
});

此附加委派的事件處理程序的#x對象和事件處理火災隨時隨地的touchstart事件發生任何子對象，其id屬性與「X_」開始。

這裏是委託事件處理一些其他的參考文獻：

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?

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

來源

2014-03-19 02:11:05 jfriend00

差不多要刪除現有的元素（和他們綁定），並創建具有相同的IDS新的（但不綁定）。一種解決方案是使用jQuery.fn.on來綁定事件。這樣綁定將是保留的x的一部分。

$('#x').on('touchstart', '#x_1, #x_2, #x3, #x4', yourFunction)

來源

2014-03-19 01:45:11 sabof

更改DOM元素是否會影響綁定的子元素？

回答

相關問題