jQuery中bind与live的用法与区别详解编程语言

首先介绍这两个方法之前,我们常用的是click()方法

$("a").click(function() { 
     alert("hello"); 
});

click()方法是bind()方法的一种简单方法。在bind()中,
jQuery所有JavaScript事件对象,比如focus, mouseover,和resize,
都是可以作为type参数传递进来的。

参数:type,[data],function(eventObject)

例如:

$("p").bind("click",function(){ 
     alert("hello"); 
})

也可以传参

var message = "how are you!"; 
$("p").bind("click",{msg:message},function(e){ 
     alert(e.data.msg); 
})

live()给所有匹配的元素附加一个事件处理函数,
即使这个元素是以后再添加进来的也有效。
如下:

<tr class="mytr"> 
     <td class="mytd">Click me</td> 
</tr> 
 
$(".mytd").bind("click",function(){ 
      alert("hello"); 
})

点击Clike me 会弹出hello

此时添加一个新的元素进来

$(".mytr").after("<tr><td class='mytd'>后加的</td></tr>");

这时 再使用bind点击”后加的”不会执行

改为使用live()方法

$(".mytd").live("click",function(){ 
	alert("hello"); 
})

.live()方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:

绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。

传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/14446.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论