jQuery中bind与live的用法及区别小结_jquery

首先介绍这两个方法之前,我们常用的是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 树的根节点上。

时间: 2024-08-01 11:25:49

jQuery中bind与live的用法及区别小结_jquery的相关文章

jQuery中delegate与on的用法与区别

 jQuery1.7中 .delegate()已被.on()取代,下面以示例的方式为大家介绍下jQuery中delegate与on的用法与区别,感兴趣的朋友可以参考下 在jQuery1.7中 .delegate()已被.on()取代.对于早期版本,它仍然使用事件委托的最有效手段.  在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的.    .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.  代码如

jQuery中delegate和on的用法与区别详细解析

 本篇文章主要是对jQuery中delegate和on的用法与区别进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 在jQuery1.7中 .delegate()已被.on()取代.对于早期版本,它仍然使用事件委托的最有效手段. 在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的.   .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.    代码如下: // jQuery 1.4.3+

jQuery中hover与mouseover和mouseout的区别分析_jquery

本文实例分析了jQuery中hover与mouseover和mouseout的区别.分享给大家供大家参考,具体如下: 以前一直以为在jquery中其实mouseover和mouseout两个事件等于hover事件.两个没什么区别,应该是一样的.但昨天一个动画效果才让我见识了,这两个并不能等同. <div class="wrapper"> <div class="img"></div> <div class="tex

jquery中事件委派代码分析以及jQuery中delegate和on的用法与区别详细解析

jquery中事件委派我们会使用到delegate与live方法了,下面我就以delegate与live方法为例子给各位分析一下jquery 事件委派的例子吧,希望例子能帮助到各位朋友. 什么是jquery中的事件委派? 在jquery中有一个很重要的概念--事件委派,相信很多搞前端开发的人都听说过,零度逍遥本来对此不是十分理解,但经过一个高人的指点后,才发现这个功能还是蛮强大的,今天就给大家分享一下. 事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素. 说

jQuery中animate的几种用法与注意事项_jquery

一.animate语法结构 animate(params,speed,callback) params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2} speed:速度参数[可选] callback:在动画完成时执行的函数[可选] 二.自定义简单动画 用一个简单例子来说明,实现单击某div在页面上横向飘动的效果. <style> #cube{ position:relative;/* 不加这句元素不能动 */ width:30px; height:30px;

jQuery中delegate和on的用法与区别详细解析_jquery

在jQuery1.7中 .delegate()已被.on()取代.对于早期版本,它仍然使用事件委托的最有效手段.在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的. .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 复制代码 代码如下: // jQuery 1.4.3+$( elements ).delegate( selector, events, data, handler );// jQuer

jQuery中delegate与on的用法与区别示例介绍_jquery

在jQuery1.7中 .delegate()已被.on()取代.对于早期版本,它仍然使用事件委托的最有效手段. 在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的. .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 复制代码 代码如下: // jQuery 1.4.3+ $( elements ).delegate( selector, events, data, handler ); // jQ

JQuery中Bind()事件用法分析

这篇文章主要介绍了JQuery中Bind()事件用法,实例分析了Bind()事件的功能.特点与绑定事件时的使用技巧,需要的朋友可以参考下 本文实例分析了JQuery中Bind()事件用法.分享给大家供大家参考.具体分析如下: 我们先看一下它的定义: ? 1 .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件方法的行为.期中它的三个参数的意义分别如下: eventType是一个字

jQuery中bind()方法用法实例_jquery

本文实例讲述了jQuery中bind()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素的特定事件绑定事件处理方法. 在语法上bind()方法和one()方法是一样的,它们的不同在于绑定的处理方法的执行次数. 语法结构一: 复制代码 代码如下: $(selector).bind(type,data,function) 参数列表: 参数 描述 type 定义绑定到匹配元素中的事件类型. 如果有多个事件使用空格分隔. data 可选.传递给事件对象的额外数据对象. function