jquery 事件委托绑定click的使用方法

直接绑定ul的click事件

代码如下	复制代码
$("ul").click(function(e)

例子

代码如下	复制代码
$(function(){  //$("ul").on('click',this,function(e){  $("ul").click(function(e){   $target = $(e.target);   if ($target.is("h3")) {    alert("h3");      }else if($target.is("a.a1"))   {    alert("a.a1");     }   else if($target.is("a.a2"))   {    alert("a.a2");     }   else if($target.is("a.uhead")) //www.111cn.net   {    alert("a.uhead");   }  }); });

例如，假如我们要开发 动态添加文本框 每添加一个文本框就有一个a标签用来取消文本框。像这样的帮定是效率低下的：

代码如下	复制代码
$('#myList a).bind('click', function(){     $(this).closest('li').remove();     // do stuff });

反而，我们应该在父级侦听click事件。

代码如下	复制代码
$('#myList).bind('click', function(e){     var target = e.target, // e.target grabs the node that triggered the event.         $target = $(target);  // wraps the node in a jQuery object     if (target.nodeName === 'A') {         $target.closest('li').remove();         // do stuff www.111cn.net     } });

父节点担当着发报机的工作，可以在触发了事件的目标element上做一些工作

Example 5.10. 使用$.fn.delegate委托事件

代码如下	复制代码
$('#myUnorderedList').delegate('li', 'click', function(e) {     var $myListItem = $(this);     // ... });

Example 5.11. 使用$.fn.live委托事件

代码如下	复制代码
$('#myUnorderedList li').live('click', function(e) {     var $myListItem = $(this);     // ... });

解除委托事件绑定
如果你需要移除已委托的事件，你不能只是简单地解除绑定。 对使用$.fn.delegate绑定的事件使用$.fn.undelegate解除绑定， 对使用$.fn.live绑定的事件使用$.fn.die解除绑定。 跟绑定类似，你可以选择性地传入绑定函数的名字来解除绑定。

代码如下	复制代码
$('#myUnorderedList').undelegate('li', 'click'); $('#myUnorderedList li').die('click');

 

你可能感兴趣的文章

• jquery dbclick双击事件应用实例
• 一个简单的jquery的click事件代码
• jquery中click与dblclick事件冲突解决方法
• jquery动态移除/增加onclick属性详解