addEventListener消失後追加innerHTML

好吧，所以我有以下html添加到使用javascript/greasemonkey的網站。（只是樣品）addEventListener消失後追加innerHTML

<ul> 
<li><a id='abc'>HEllo</a></li> 
<li><a id='xyz'>Hello</a></li> 
</ul>

，我還添加了一個click事件偵聽器的元素。所有的工作都很好，直到這一點，單擊事件被點擊時，我點擊元素。

但是...我有腳本的另一個功能，即在一定的條件下，將修改HTML，即它追加它，所以它看起來像：

<ul> 
<li><a id='abc'>Hello</a></li> 
<li><a id='xyz'>Hello</a></li> 
<li><a id='123'>Hello</a></li> 
</ul>

，但這樣做時，它打破了我爲前兩個元素添加的聽衆... 當我點擊它們時沒有任何反應。

如果我註釋掉了附加函數的調用，它就會重新開始工作！

幫助，請...

來源

2010-04-21 1nfected

你的問題可能是你的JavaScript。你可以在這裏粘貼，這樣我們可以看到發生了什麼？ – Jage 2010-04-21 17:04:02

是追加新的HTML功能是： var menu = pmgroot.getElementsByTagName("ul")[0]; menu.innerHTML += (its long so i din't bother to put it here) – 1nfected 2010-04-21 17:10:06

您設置innerHTML屬性要覆蓋已設置有以往任何HTML的任何時間。這包括連接賦值，因爲

element.innerHTML += '<b>Hello</b>';

是一樣的書寫

element.innerHTML = element.innerHTML + '<b>Hello</b>';

這意味着通過HTML沒有附加屬性將是「超然」的所有處理程序，因爲該元素，他們被裝不復存在，並且取代了他們的一套新元素。要保留所有以前的事件處理程序，必須添加元素而不覆蓋任何以前的HTML。要做到這一點，最好的辦法是使用DOM創建功能，如createElement和appendChild：

var menu = pmgroot.getElementsByTagName("ul")[0]; 
var aEl = document.createElement("a"); 
aEl.innerHTML = "Hello"; 
aEl.id "123"; 
menu.appendChild(aEl);

來源

2010-04-21 17:32:06

感謝您的解釋安迪，會嘗試一下=） – 1nfected 2010-04-21 18:02:32

燁，就像一個魅力:) 再次感謝安迪＆Jage，欣賞它;） – 1nfected 2010-04-21 18:14:27

ü也可以使用jQuery的「活」功能

來源

2011-01-26 06:31:38

addEventListener消失後追加innerHTML

回答

相關問題