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