jQuery初学踩坑记录

问题：

1.jQuery绑定的事件第一次点击无效，第二次才有用？

2.ajax局部刷新页面后，jQuery事件失效？

3.按钮和页面同时存在点击事件，结果点击按钮出现2种事件？

 

解答：

1.第一次点击无效很大原因是由于在函数中绑定的事件，如：

function test(){

    $('div').on('click',function(event){

         console.log('div click!')；

})

}

如果这么写，不管这个函数在哪调用，每次第一次点击都无效，原因是第一次点击时函数被执行，此时才实现了div元素绑定了click事件，所以click事件只能在下次点击时触发。 

解决方案：不要在函数绑定事件，直接绑定就好。

 

2.ajax刷新局部页面后，由于该页面的元素是后来生成的，所以初始化绑定事件对他无效，如：

$('div').on('click',function(event){

    console.log('div click!');

})

解决方案：使用事件委托，从最近的一个不会发生改变的父类元素开始定位该元素，如：

$(body).on('click','div',function(event){

    console.log('div click!');

}) 

 由于body是不会改变的，所以不管ajax怎么刷新，新生成的div都可以被绑定click事件。

 

3.该问题可以使用冒泡解决，因为按钮存在于页面，点击按钮相当于点击了按钮和页面，此时阻止冒泡即可：

event.stopPropagation();