jquey 中.live 和.bind区别

缺乏、安全感 2022-08-19 05:52 176阅读 0赞

先举个例子：

$("div.dj").bind("click",function(){  
             alert("XXXXXXXXXXX");  
              $("body").append('<div class="dj">再点击</div>');  
          });

$("div.dj").live("click",function(){  
             alert("XXXXXXXXXXX");  
              $("body").append('<div class="dj">再点击</div>');  
          });

结果：

在调用bind()后插入到body里面的“再点击”没有起到任何效果。

调用live()后插入到body的“再点击”可以继续使用。

1.live(type,\[data\],fn)  给每个匹配元素附加一个事件处理函数，即使这个元素后面再添加进来的也有效。

2.bind(type,\[data\],fn)   为每个匹配元素的特定事件绑定处理函数，如果这个元素在调用.bind()之后添加的，想再次触发时这个元素不起任何效果。

参数：

<table style="height:131px"> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>含有一个或多个事件类型字符串或自定义的事件名。<span style="color:#ff0000">可以同时绑定多个事件 </span> <p>如："click","submit","focus","mouseover","resize"......</p> <p><span style="color:#ff0000">自定义</span>：通过.trigger()或.triggerHandler()手动触发</p> </td> 
  </tr> 
  <tr> 
   <td>data</td> 
   <td>Object</td> 
   <td>作为event.data属性值传递给事件对象的额外数据对象，是可选的。</td> 
  </tr> 
  <tr> 
   <td>fn</td> 
   <td>function</td> 
   <td>每个匹配元素的事件处理函数</td> 
  </tr> 
 </tbody> 
</table>

例：

$("#foo").bind("mouseenter mouseleave",function(){  
             $(this).toggleClass("enteredCss");  
         })

id="foo"元素，鼠标移进去的时候加入enteredCss样式，移出的时候去除这个样式。（初始的时候不存在这个样式）