頁面復位插入元素時，如果有一個在

一個iframe我有以下HTML：頁面復位插入元素時，如果有一個在

<div id="main"><div><iframe></iframe></div> 
<div>Content</div> 
<div>Content</div> 
<div id="clickme">Click</div> 
</div>

#clickme有後插入一個div單擊事件。所以基本上點擊#clickme後，結構應該是這樣的：在div插入

<div><div><iframe></iframe></div> 
<div>Content</div> 
<div>Content</div> 
<div id="clickme">Click</div> 
<div>Inserted div</div> 
</div>

後，頁面看起來加載的東西。在控制檯中，它看起來像iframe正在重新加載（它顯示對加載到iframe中的頁面的GET請求）。這不會是一個大問題，但所有的事件都從元素中刪除，這是一個問題。我試圖刪除iframe，問題消失了。你對這是什麼原因有什麼想法嗎？

的JS：

document.querySelector("#clickme").addEventListener("click", function(){ 
document.querySelector("#main").innerHTML+="<div></div>"; 
})

來源

2017-09-02 Wolfuryo

我們有任何想法只是猜測。因此，請編輯您的問題以包含您的js代碼和腳本源代碼（如果有）。另外，從哪些元素中刪除了事件處理程序？ – yezzz

我收錄了JS。點擊處理程序已從#clickme – Wolfuryo

中刪除（像字符串一樣）添加內容完全取代了文檔的內容，這說明處理程序停止工作並重新加載iframe。看看插入元素。 – yezzz

與innerHTML的+ =操作符會導致級聯前面的參數的主內的所有節點成純文本的轉換。之後它清除實際節點並應用新渲染的字符串。

我們需要插入新的HTML而不觸及現有的：

document.querySelector("#clickme").addEventListener("click", function(event){ 
    event.target.insertAdjacentHTML('afterend', '<div>Inserted div</div>'); 
}

居副作用這個代碼將消耗更少的時間。

來源

2017-09-02 21:17:23 gnblizz

感謝您的幫助。我不敢相信我之前沒有想過這件事。 – Wolfuryo

頁面復位插入元素時，如果有一個在

回答

相關問題