關(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)文章
JavaScript使用cookie...2007-02-02
這篇文章主要介紹了JS使用正則表達式驗證身份證號碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
javascript的創(chuàng)建多行字符串的7種方法
多行字符串的作用是用來提高源代碼的可讀性.尤其是當(dāng)你處理預(yù)定義好的較長字符串時,把這種字符串分成多行書寫更有助于提高代碼的可讀性和可維護性.在一些語言中,多行字符串還可以用來做代碼注釋. 大部分動態(tài)腳本語言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢?2014-04-04
uniapp頁面?zhèn)鲄⒌娜N方式實例總結(jié)
在進行頁面的跳轉(zhuǎn)的時候,往往需要我們將一些參數(shù)攜帶著傳遞過去這里的class樣式,下面這篇文章主要給大家介紹了關(guān)于uniapp頁面?zhèn)鲄⒌娜N方式,需要的朋友可以參考下2022-11-11
d3.js入門教程之?dāng)?shù)據(jù)綁定詳解
這篇文章主要介紹了關(guān)于d3.js數(shù)據(jù)綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)只d3.js具有一定的參考價值，需要的朋友下面來一起看看吧。2017-04-04
這篇文章主要介紹了JavaScript中如何計算字符串文本的寬度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
Bootstrap選項卡與Masonry插件的完美結(jié)合
這篇文章主要介紹了Bootstrap選項卡與Masonry插件的完美結(jié)合的相關(guān)資料,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了微信小程序登錄session的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
Web Worker 為 Web 內(nèi)容在后臺線程中運行腳本提供了一種簡單的方法，本文給大家介紹JavaScript解決單線程缺陷——webWorker,需要的朋友可以參考下2023-06-06
微信小程序表單驗證插件WxValidate的二次封裝功能（終極版）
這篇文章主要介紹了微信小程序表單驗證插件WxValidate的二次封裝功能（終極版），文中給大家提到了最終版與前面2版的不同點,需要的朋友可以參考下2019-09-09