Js 監聽器

在Ajax取數據時，采用$("#id").click(function(){})的方式不能正確設置監聽，需要用$("#parent").on("click","id", function(){});

參考文章：

版權聲明：本文為CSDN博主「花2不謝」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_25821067/article/details/74537973

本文主要介紹了解決給dom元素綁定click等事件無效問題的方法。具有很好的參考價值，下面跟着小編一起來看下吧

之前一直遇到js插件生成的元素，click事件無效的問題，重新綁定也不行，終於找到解決方法，在此記下來。

同時加深對js事件處理機制的理解。

1. 事件被解綁

這種情況下一般不會導致click失效，但以下情況，click事件就失效了：

$(function(){
$('.btn').unbind()
})
$('.btn').click(function(){
//...
})
所以，click事件要有個好習慣：

$(function(){
$('.btn').click(function(){
//...
})
})
2. js插件異步／動態加載dom

一般含有等待時間／開始運行時間：WaitTime

此時直接綁定／監聽無效：

$(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()函數體中加click事件
同2中的事件委托方法。
4. 點擊鏈接無反應

以下代碼會導致a標簽有href也無法跳轉

$(function() {
$('a').on('click',
function(e) {
e.preventDefault()
//...
})
})
解決方法：

$(function(){
$('a').on('click',function(e){
e.preventDefault()
//...
})
$('a').unbind()
})
小結

1.事件綁定，事件監聽，事件委托 相關鏈接

2.事件捕獲與冒泡 相關鏈接

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
事件捕獲

父元素先發生，子元素后

事件冒泡

子元素先發生，父元素后