原本
- $('#count').live('click', function() {
- //function code here.
- });
可以直接替换成
- $('#count').on('click', function() {
- //function code here.
- });
的,但是on多了个条件,就是$('#count')必须是当前存在的!
如果$('#count')当前不存在,比如是动态生成的,那么就需要用代理的模式走,就变成
$(父节点).on("事件","动态生成子节点",handler)
例如: btn-primary 是动态生成的,dynamic-table是其父元素则
$("#dynamic-table").on("click",".btn-primary",function(){
var houseNumberId = $("#houseNumberId").val();
//alert($(this).attr("data-url")+'houseNumberId:'+houseNumberId);
});
这样了。
但对于当前存在的,就没必要这么搞了。
参考jquery的文档。
在jQuery的开发过程中,我们往往需要处理各种事件,例如click(),hover()等。在jQuery的API中,我们可以使用不同的方法来将这些事件绑定到特定的元素中。今天这篇文章中,我们将要介绍如何使用bind(),on(),live()和delegate()方法来绑定特定的事件,什么情况下使用,什么情况下不适用它们。希望能够帮助大家更好的了解和使用jQuery的时间处理方法。
一、bind()方法
使用较早版本jQuery的教程或者应用中,我们往往使用bind()方法来将事件绑定到特定的元素上,如下:
<section id="container">
<img class="scv" src="images/scv.gif" alt="Terran unit" />
</section>
$('.scv').bind('click', function(){
$('#container').append('<img class="scv" src="images/scv.gif" alt="Terran unit" />');
});
如果你查看相关jQuery1.7.1最新文档的话,大家应该知道最新的jQuery中bind目前其实最后也是调用on()方法来实现的,所以呢,如果现在大家使用最新jQuery版本(目前为1.7.1)的话,尽量避免使用bind()方法。
如果大家点击运行这个示例肯定会发现,当点击第一个图片时,会生成新的图片,但是如果你点击新生成的图片,不会继续执行添加新图片的操作。为什么会这样呢? 因为使用bind绑定的元素是页面上所有存在的class="scv"的元素,新生成的元素添加到DOM,并没有绑定我们添加的click方法。那么怎么让新的图片也可以绑定我们click方法呢。我们可以使用clone()方法,如下:
$('.scv').bind('click', function(){
$(this).clone(true).appendTo('#container');
});
我们这里使用clone方法来生成一个新的图片,并且添加到#container容器中。这里我们使用clone方法参数true,代表克隆的元素同时克隆绑定的方法。
二、live()方法
在老的jQuery版本中,我们有一个方法专门用来处理动态生成的元素的事件绑定-live(),使用live()方法可以将方法绑定的效果应用到已存在或者新创建的DOM元素。代码如下:
$('.scv').live('click', function(){
$(this).clone().appendTo('#container');
});
live()调用过程如下:
我们首先将click方法绑定到了Document,然后,查找Document里是否有.scv这个元素。这个过程对于性能来说可能比较浪费,所以我们可以使用如下带参数方法优化方式:
$('.scv', '#container').live('click', function(){
$(this).clone().appendTo('#container');
});
以上代码中我们使用#container作为绑定的上下文,jQuery将会在#container这个元素中查询.scv元素。
三、Delegate()方法
在最新的jQuery版本中,我们最好不要使用live()方法,因为它已经被放弃了,这里我们使用delegate方法来指定事件绑定的上下文,如下:
$('#container').delegate('.scv','click', function(){
$(this).clone().appendTo('#container');
});
大家可以看到以上代码中,我们首先设定了方法绑定的上下文-#container,然后,寻找class为.scv的元素,再绑定click方法。
注意:这里克隆后添加到的元素应该是你定义的上下文,否则,新生成的图片绑定不上click方法。
四、on()方法
.on( events [, selector ] [, data ], handler(eventObject) )
这是jQuery官方给出的Api,其实在最新版本的jQuery类库中,所有以上方法在后面其实都是调用on()方法,所以,如果你开发最新版本的jQuery,完全可以使用on()方法来处理所有的事件绑定,避免过多的方法调用。如下:
$('.scv').on('click', function(){
$(this).clone(true).appendTo('#container');
});
如果要保证你动态添加的东西可以绑定上handler,那么$("selector").on()中的selector应该是更高的级别,父div,body或者document等。
五、总结
总的来说,最新的jQuery版本中,所有的方法基本最后都使用on()方法来处理,如果你针对新版本的jQuery做开发,大家可以考虑使用delegate()和on()方法处理事件绑定,虽然以前方法也可以用,但是大都都已经退出历史舞台。
相关推荐
本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...
本文将深入探讨“Jquery数据绑定分页源码”这一主题,这通常涉及到在网页应用中实现数据的动态加载和分页显示。 数据绑定是前端开发中的一个重要概念,它允许开发者将UI元素与数据源进行关联,当数据发生变化时,UI...
jQuery Shortcuts 是个超轻量级的方法,使用 jQuery 来绑定快捷键(热键)。 标签:jquery
本主题将深入探讨如何使用jQuery实现动态绑定和二级联动效果,特别关注于DropDownList(下拉列表)的交互设计。这在构建数据驱动的Web应用时尤其常见,例如在地址选择、分类筛选等场景。 一、动态绑定 动态绑定是...
在流程设计中,作者提出了节点序号、节点名称、是否允许附件和会签等概念,并使用jquery动态绑定加载。 在表单设计中,作者介绍了如何使用 class 来控制表单节点是否可以填写项,并使用jquery动态绑定加载。在流程...
`.bind()`是jQuery中更通用的事件绑定方法,不仅可以绑定`click`事件,还可以绑定其他多种事件,如`mouseover`、`mouseout`等。下面是如何使用`.bind()`绑定`click`事件的例子: ```javascript $('#clickmebind')....
总结来说,jQuery的事件绑定功能是其强大功能的一部分,它使开发者能够轻松响应用户交互,提供更加动态和响应式的网页体验。熟练掌握事件绑定,不仅能提高开发效率,还能提升用户体验,这是每个前端开发者都应具备的...
在layui框架中,动态绑定事件通常使用jQuery来进行。但是,由于兼容性问题,移动端iOS不支持直接在body上使用事件委托,因此,我们需要将事件监听的目标改为其他元素,例如.setBox。 在实际操作中,我们可以通过...
### 使用jQuery绑定CSS3 Animation-Keyframes关键帧动画 #### 前言 本文将详细介绍如何通过jQuery来控制CSS3中的`animation-keyframes`关键帧动画的启动与停止。这种技术非常实用,尤其当动画需要根据用户的操作...
《jQuery动态网页交互设计》 在当今的网页开发领域,jQuery以其简洁的API和强大的功能,成为了前端开发者不可或缺的工具之一。本项目专注于利用jQuery来实现动态网页交互设计,旨在帮助学习者掌握如何通过jQuery...
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: ...
7. 绑定事件到动态元素:文章最后部分展示了如何为动态生成的select元素绑定事件处理器。通过`$.on()`方法,即使元素是后来添加到页面中的,我们依然可以捕捉到它们的事件。在这个例子中,为ID以`"sl_0"`开头的...
**jQuery绑定事件**是JavaScript库jQuery中的核心功能之一,它极大地简化了DOM元素事件处理的流程,使得开发者能够更加高效地编写代码。在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`...
在这个特定的场景中,我们讨论的是如何使用jQuery来创建一个可以绑定动态数据的下拉框插件。下拉框(Dropdown)是网页表单中常见的一种交互元素,它允许用户从一系列预设选项中进行选择。 **动态数据绑定**是指在...
jQuery动态缩放焦点图是一种常见的网页交互效果,用于展示一系列图片或内容,通过动态缩放的方式吸引用户注意力,提升用户体验。这种效果常被应用于网站的首页、产品展示、广告轮播等位置。jQuery库因其轻量级、易用...
《jQuery动态画廊滚动效果详解》 在网页设计与开发中,动态效果是提升用户体验的重要手段之一。"jQuery动态画廊滚动效果"就是一个典型的应用,它巧妙地将JavaScript的动态特性与jQuery库相结合,实现了图片展示的...
数据绑定是指将动态获取的数据自动显示在网页元素上。jQuery的`.html()`, `.text()`, 和 `.val()` 方法可以帮助我们将服务器返回的数据绑定到HTML元素。 ```javascript success: function(data) { $("#result")....
总的来说,“jQuery异步绑定dropdownlist”是一个常见的Web开发任务,它结合了jQuery的DOM操作、Ajax请求以及服务器端控件的使用,实现了高效、动态的用户界面。了解并熟练掌握这一技术,对于提升Web应用的用户体验...