關(guān)于innerHTML后丟失動態(tài)綁定的EVENT問題解決方法
更新時間：2013年05月19日 16:30:56 作者：
用innerHTML取出一段內(nèi)容后再innerHTML回去,那么原來動態(tài)綁定的事件就會丟失，下面與大家分享下解決方法，感興趣的朋友可以參考下哈
用innerHTML取出一段內(nèi)容后再innerHTML回去,那么原來動態(tài)綁定的事件就會丟失,如:
html:
<body><div id='d1'>點擊</div></body>
script:
document.getElementById('d1').onclick=function(){alert(1)};
var html=document.body.innerHTML;
document.body.innerHTML=html;
這段代碼執(zhí)行后點擊d1是沒有任何反應(yīng)的。
解決方法：
把onclick綁定到父元素，利用冒泡原理，判斷當(dāng)前元素是否為d1,若為d1則執(zhí)行
document.body.onclick=function(e){
var e=e||event;
var current=e.target||e.srcElement
if(current.id=='d1'){alert(1)}
}
這也是折中的方法，肯定會影響效率的。
html:
復(fù)制代碼 代碼如下:
<body><div id='d1'>點擊</div></body>
script:
復(fù)制代碼 代碼如下:
document.getElementById('d1').onclick=function(){alert(1)};
var html=document.body.innerHTML;
document.body.innerHTML=html;
這段代碼執(zhí)行后點擊d1是沒有任何反應(yīng)的。
解決方法：
把onclick綁定到父元素，利用冒泡原理，判斷當(dāng)前元素是否為d1,若為d1則執(zhí)行
復(fù)制代碼 代碼如下:
document.body.onclick=function(e){
var e=e||event;
var current=e.target||e.srcElement
if(current.id=='d1'){alert(1)}
}
這也是折中的方法，肯定會影響效率的。
相關(guān)文章
微信小程序tab切換可滑動切換導(dǎo)航欄跟隨滾動實現(xiàn)代碼
這篇文章主要介紹了微信小程序tab切換可滑動切換導(dǎo)航欄跟隨滾動實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
下面小編就為大家?guī)硪黄獪\談JS中的bind方法與函數(shù)柯里化。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
下面小編就為大家?guī)硪黄猨s 點擊a標簽 獲取a的自定義屬性方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
JavaScript對JSON數(shù)組簡單排序操作示例
這篇文章主要介紹了JavaScript對JSON數(shù)組簡單排序操作,結(jié)合實例形式分析了javascript使用sort()方法針對json數(shù)組元素排序的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-01-01
JS獲取月的最后一天與JS得到一個月份最大天數(shù)的實例代碼
本篇文章主要是對JS獲取月的最后一天與JS得到一個月份最大天數(shù)的實例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了Typescript中索引簽名使用詳解,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了js實現(xiàn)帶按鈕的上下滾動效果,設(shè)計javascript鼠標事件及頁面元素樣式的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
選擇指定數(shù)量后checkbox不可選(變灰)javascript代碼
選擇指定數(shù)量后checkbox不可選(變灰)javascript代碼2009-06-06
用javascript來實現(xiàn)動畫導(dǎo)航效果的代碼
javascript來實現(xiàn)動畫導(dǎo)航效果是通過定時器與鼠標事件響應(yīng)相結(jié)合,動態(tài)修改頁面元素屬性實現(xiàn)的動畫導(dǎo)航效果,需要的朋友可以參考一下2007-12-12
這篇文章主要介紹了weui上傳多圖片,壓縮,base64編碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06