最近做列表js排序时出现一个问题,当点击排序后,列表中的一些ajax失效。
测试后发现,当点击后无法进入事件处理函数。后写了一个简单页面测试,重新布局页面元素后,相应的js也无反应。后直接页面元素绑定函数解决。
在新加元素的时候可以使用.live方法,
事件委托
.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:
- 生成一个click事件传递给 <div> 来处理
- 由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡到DOM树上
- 事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
- 执行由 .live() 绑定的特殊的 click 事件处理函数。
- 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
- 如果找到了匹配的元素,那么调用原始的事件处理函数。