事件委托

今天写页面的时候 发现一个问题

就是在我动态的添加了 html 终于搞定样式统一之后

新增元素的JQ事件并没有得到响应

$(document).ready(function() {
    $.fn.mylive=function(eventType,fn){  
        var that=this.selector;  
        $(document).bind(eventType,function(event){  
            va
r match=$(event.target).closest(that)  
            if(match.length !== 0){  
                fn.apply($(event.target),[event]);  
            }  
        })  
    } 

然后写了这么段代码 

之后下面就用 

$(".item").hide(); 
    $(".readItem").mylive('click',function(){
        $(this).parent().siblings('.item').slideToggle();
        
        });
  
    $('.confirmBtn').mylive('click',function(event){ 
    
      if(confirm("确定要删除么？")){
            $(this).parent().remove();
            
            }
        
          
    });  
    $('.addItem').mylive("click",function(){
        var newItem = $('<li class="count"></li>').html($('.count').html());
        
        $(".Itemlist").append(newItem);
        });

jq事件就得到了响应

但是具体为啥我也不是很清楚

然后 大概就是事件委托那里的内容

奇怪的是 网路上找的几种方式 如 .live()  .delegate() 等 

.live()用了没反应 

家遥说 我用了$(this)的原因

 

大概搞懂是怎么回事了

因为 给对象添加事件先于给把对象添加到dom树里面 

所以我通过找到父节点或者更上层的节点的方式 再用

event.target

来找到新增的那个对象
给其加上事件

 

由此想一下 之前没遇到问题前纯看书的时候

遇到的事件委托的用法

基本上是 比如 

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

多个子节点的时候 用事件委托的方式到 ul 上面

$("ul").delegate("li","click",function(){/*显示更多信息*/});

就可以了...

昂~~~~~恍然大悟的感觉好开心噢 ~~~~