`
happyqing
  • 浏览: 3198114 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery动态添加元素绑定事件click,bind,live,on

阅读更多

 

一、普通绑定

$("button").click(function(){
  $("p").hide();
}); 

在上面的例子中,当按钮的点击事件被触发时会调用一个函数

http://www.w3school.com.cn/jquery/jquery_events.asp


二、bind方法

$("button").bind("click",function(){
  $("p").slideToggle();
});

bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

http://www.w3school.com.cn/jquery/event_bind.asp

 

三、live方法

动态添加元素后,bind的事件无效,在1.9版本以前使用live,1.9+使用on

$("button").live("click",function(){
  $("p").slideToggle();
});

live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。

通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。

http://www.w3school.com.cn/jquery/event_live.asp

 

四、on方法

 

$("button").on("click",function(){
  $("p").slideToggle();
});
分享到:
评论

相关推荐

    jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...

    jQuery中对未来的元素绑定事件用bind、live or on

    为了解决这个问题,jQuery提供了一些机制来为未来元素绑定事件,比如`bind`、`live`、`on`和`.one()`方法。 首先,我们要认识到,`bind`方法是不可以用来绑定未来元素的事件的。这是因为在`bind`方法被调用的时候,...

    JQuery 动态删除添加html元素bind事件

    然而,在动态添加元素后,使用`bind()`可能无法立即捕捉到新元素的事件,因为事件处理程序是在元素创建时绑定的。为了解决这个问题,可以使用`live()`或`on()`方法(jQuery 1.7+)来实现事件委托。在jQuery 1.3到1.9...

    JQuery调用绑定click事件的3种写法

    总结来说,jQuery的`click()`、`.bind()`和`.on()`都是用来绑定`click`事件的方法,但在不同的情景下,选择合适的方法能够优化代码性能和可维护性。对于简单的静态页面,`click()`和`.bind()`就足够了;而当涉及到...

    jquery绑定事件 bind和on的用法与区别分析

    1. **事件委托**:`on` 支持事件委托,可以为未来可能存在的动态添加元素绑定事件,而 `bind` 不支持。 2. **性能**:由于事件委托,`on` 在处理大量子元素时性能更优,而 `bind` 需要为每个元素单独绑定事件,可能...

    jQuery绑定事件方法及区别(bind,click,on,live,one)

    此外,`bind()`、`live()`和`delegate()`在某些早期版本的jQuery中不支持动态创建元素的事件绑定,而`on()`方法解决了这个问题。 了解了这些方法的使用和区别,可以帮助开发者在处理不同情况下的事件绑定时做出更...

    浅谈Jquery为元素绑定事件

    在Jquery中,我们可以通过多种方式为元素绑定事件,例如使用bind()方法、live()方法、delegate()方法和on()方法。随着Jquery版本的演进,live()和delegate()方法已经被on()方法所取代,因为on()方法提供了更灵活的...

    Jquery绑定事件(bind和live的区别介绍)

    例如,`$('.clickMe').live('click', fn)`会在任何带有`.clickMe`类的元素被点击时触发`fn`函数,即使这些元素是在`live()`调用之后动态添加的。 `live()`的事件处理流程如下: - 用户触发事件,如点击。 - 事件...

    jQuery动态添加的元素绑定事件处理函数代码

    当使用jQuery来处理动态添加到网页中的元素时,传统的事件绑定方法,如.click()和.bind(),只能应用在页面加载时已存在的元素上,对于之后通过JavaScript动态添加的元素则无法触发相应的事件处理函数。这是因为在...

    JQuery绑定事件

    其中,`.bind()`与`.on()`类似,`.live()`和`.delegate()`则用于处理动态生成的DOM元素的事件,尤其是`.live()`已经废弃,`.delegate()`在jQuery 1.7之后被`.on()`全面取代。 除了基本的事件绑定,jQuery还支持事件...

    jQuery:bind() delegate() live()事件绑定

    当使用`bind()`时,如果DOM元素是在事件绑定后动态添加的,那么新元素不会被绑定事件处理器。`live()`通过监听`document`元素上的事件来解决这个问题,它检查事件是否是目标事件类型,并且目标元素是否与提供的选择...

    jQuery的三种bind/One/Live/On事件绑定使用方法

    `live()`是jQuery的一个创新,它允许动态绑定事件,即不仅对现有元素有效,对将来添加到DOM中的元素也有效。`live()`通过在文档级别捕获事件,然后根据选择器判断是否向下传播事件,提高了效率。由于性能和设计上的...

    jQuery如何获取动态添加的元素

    这就是说,如果使用传统的事件绑定方法,比如jQuery的.bind()方法,这些方法只会影响当前已存在的元素,对于之后动态添加到DOM中的元素则不产生效果。 在较早的jQuery版本中,.live()方法被引入,用来解决动态元素...

    jQuery中bind(),live(),delegate

    总结来说,`bind()`适用于静态页面元素的事件绑定,`live()`适用于动态元素,`delegate()`提供了更好的性能控制,而`on()`是现代jQuery开发的标准选择。理解并灵活运用这些方法,可以使你在处理JavaScript事件时更加...

    jQuery动态生成的元素绑定事件操作实例分析

    首先,我们需要了解在jQuery中使用普通的事件绑定方法如click(), bind(), live()等,直接绑定到动态生成的元素上时,这些方法是无法工作在将来添加的元素上的。例如,通过append()方法动态添加新元素后,如果直接...

Global site tag (gtag.js) - Google Analytics