• 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');
     
    你可能感兴趣的文章
  • 相关阅读:
    Linux
    Cookie & Session
    HTTP
    HTTP
    抓包工具
    抓包工具
    抓包工具
    python
    python
    python
  • 原文地址：https://www.cnblogs.com/alibai/p/3553643.html
Copyright © 2020-2023  润新知