解決給dom元素綁定click等事件無(wú)效問(wèn)題的方法
之前一直遇到j(luò)s插件生成的元素，click事件無(wú)效的問(wèn)題，重新綁定也不行，終于找到解決方法，在此記下來(lái)。
同時(shí)加深對(duì)js事件處理機(jī)制的理解。
1. 事件被解綁
這種情況下一般不會(huì)導(dǎo)致click失效，但以下情況，click事件就失效了：
$(function(){
$('.btn').unbind()
})
$('.btn').click(function(){
//...
})
所以，click事件要有個(gè)好習(xí)慣：
$(function(){
$('.btn').click(function(){
//...
})
})
2. js插件異步／動(dòng)態(tài)加載dom
一般含有等待時(shí)間／開(kāi)始運(yùn)行時(shí)間：WaitTime
此時(shí)直接綁定／監(jiān)聽(tīng)無(wú)效：
$(function(){
$('.container .btn').on('click',function(){
//...
})
})
解決方法1：
$(function(){
setTimeout(function{
$('.container .btn').click(function(){
//...
})
//.btn 加載后事件
},WaitTime)
})
解決方法2(事件委托，即委托給父元素)：
$(function(){
$('.container').on('click','.btn',function(){
//...
})
})
3. ajax 異步加載的dom
- 可以在done()函數(shù)體中加click事件
- 同2中的事件委托方法。
4. 點(diǎn)擊鏈接無(wú)反應(yīng)
以下代碼會(huì)導(dǎo)致a標(biāo)簽有href也無(wú)法跳轉(zhuǎn)
$(function(){
$('a').on('click',function(e){
e.preventDefault()
//...
})
})
解決方法：
$(function(){
$('a').on('click',function(e){
e.preventDefault()
//...
})
$('a').unbind()
})
小結(jié)
1.事件綁定，事件監(jiān)聽(tīng)，事件委托 相關(guān)鏈接
2.事件捕獲與冒泡 相關(guān)鏈接
target.addEventListener(type, listener[, options]); target.addEventListener(type, listener[, useCapture]);
事件捕獲
父元素先發(fā)生，子元素后
事件冒泡
子元素先發(fā)生，父元素后
3.javascript執(zhí)行順序
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式分析
這篇文章主要介紹了JS實(shí)現(xiàn)面向?qū)ο罄^承的5種方式,結(jié)合實(shí)例形式分析了JavaScript面向?qū)ο罄^承功能的5種常見(jiàn)實(shí)現(xiàn)方法原理與操作技巧,需要的朋友可以參考下2018-07-07
Javascript 阻止javascript事件冒泡，獲取控件ID值
Javascript學(xué)習(xí)日記-阻止javascript事件冒泡，獲取控件ID值2009-06-06
javascript DOM實(shí)用學(xué)習(xí)資料
比較詳細(xì)的實(shí)例分析了dom的一些常用方法2008-09-09
這篇文章主要介紹了代碼整潔之道(重構(gòu))，不管對(duì)于何種語(yǔ)言，重構(gòu)都是軟件開(kāi)發(fā)過(guò)程中不可或缺的一部分，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
JavaScript實(shí)現(xiàn)格式化字符串函數(shù)String.format
本文主要介紹了JavaScript實(shí)現(xiàn)格式化字符串函數(shù)String.format（可自動(dòng)解析引號(hào)轉(zhuǎn)義字符）。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
詳解JavaScript如何準(zhǔn)確獲取任意變量的數(shù)據(jù)類型
js是弱類型語(yǔ)言，或者說(shuō)是動(dòng)態(tài)語(yǔ)言，在定義變量時(shí)我們可以不提前聲明變量的類型，也可以在變量聲明后賦予不同類型的值。所以本文為大家詳解一下JavaScript如何準(zhǔn)確獲取任意變量的數(shù)據(jù)類型，需要的可以參考一下2022-06-06
JavaScript獲取地址欄參數(shù)的方法實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于JavaScript獲取地址欄參數(shù)的方法實(shí)現(xiàn),項(xiàng)目中經(jīng)常遇到獲取上個(gè)頁(yè)面跳轉(zhuǎn)過(guò)來(lái)獲取當(dāng)前的參數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫(huà)板
這篇文章主要為大家詳細(xì)介紹了Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫(huà)板的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
JS數(shù)字抽獎(jiǎng)游戲?qū)崿F(xiàn)方法
這篇文章主要介紹了JS數(shù)字抽獎(jiǎng)游戲?qū)崿F(xiàn)方法,可實(shí)現(xiàn)按下回車(chē)鍵出現(xiàn)隨機(jī)數(shù)字切換的效果,涉及時(shí)間與隨機(jī)數(shù)的相關(guān)操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了微信小程序用戶拒絕授權(quán)的處理方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09