最近的工作感触,记录一下
首先就是发现自己对Jquery的理解还是皮毛啊,根本就没有发现它的精髓,一直都只是会用一些change、blur之类的事件+匿名函数的方式,但是上次遇到了动态添加元素并且绑定事件的情况下就没辙了,后来发现Jquery还有live这样的事件委派发方法。 当需要在页面上动态的添加元素,并且同时要给元素添加事件的时候,老的办法自然就是在HTML里面写上一大堆的onclik=、onchange=之类的,但是作为代码洁癖的我自然是不能这么写的,之前我采用的办法是把之前写的绑定事件再次绑定,但是这次我碰上了麻烦,因为我发现这样做了之后之前存在的同类元素的事件并没有消失,重复绑定之后造成了事件会重复执行。Live这样的事件委派方法就解决了这样的问题了。 先看看Live方法的定义: .live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤: 生成一个click事件传递给 <div> 来处理 由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡到DOM树上 事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。 执行由 .live() 绑定的特殊的 click 事件处理函数。 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。 如果找到了匹配的元素,那么调用原始的事件处理函数。 由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。 它的作用基本上和.bind() 的作用是完全一致的,只是似乎对部分事件的支持不足,但是在新版本中基本上也修正了。 $("p").live("click", function(){ $(this).after("<p>It Wor...