jQuery on()绑定动态元素出现的问题小结


Posted in Javascript onFebruary 19, 2016

jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给将来动态创建的动态元素绑定指定的事件,例如append等。

之前使用 on 的时候一直是

$("").on('click','function(){ 
}')

之后发现有些时候一直无法绑定(比如元素动态生成时),查看文档后发现正确用法应该是

$(document).on("change","#pageSize_out",function(){ 
if($("#page_out").val()!=0){ 
$("#pageSize").val($(this).val()); 
list(); 
} 
})

同时,注意

As this answers receives a lot of attention, here are two supplementary advises :

1) When it's possible, try to bind the event listener to the most precise element, to avoid useless event handling.

That is, if you're adding an element of class b to an existing element of id a, then don't use
$(document.body).on('click', '#a .b', function(){
but use
$('#a').on('click', '.b', function(){

2) Be careful, when you add an element with an id, to ensure you're not adding it twice. Not only is it "illegal" in HTML to have two elements with the same id but it breaks a lot of things. For example a selector "#c" would retrieve only one element with this id.

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

替换bind()

当第二个参数'selector'为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的'selector'参数,所以on()可以非常方便的换掉bind()

替换live()

在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。

live()写法

代码如下:

$('#list li').live('click', '#list li', function() {
//function code here.
});

on()写法

代码如下:

$(document).on('click', '#list li', function() {
//function code here.
});

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

替换delegate()

delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

delegate()的写法

代码如下:

$('#list').delegate('li', 'click', function() {
//function code here.
});

on()写法

代码如下:

$('#list').on('click', 'li', function() {
//function code here.
});

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

总结

jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。

jquery on() 方法绑定动态元素

废话不多说了,直接给大家贴代码了。

<div id="test">
<div class="evt">evt1</div>
</div>

错误的用法,下面方法只为第一个class 为 evt 的div 绑定了click事件,使用append动态创建的div则没有绑定

<script>
// 先绑定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

正确的用法如下:

<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>
Javascript 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
详解React-Todos入门例子
Nov 08 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
学习javascript文件加载优化
Feb 19 #Javascript
初识angular框架后的所思所想
Feb 19 #Javascript
复杂的javascript窗口分帧解析
Feb 19 #Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 #Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 #Javascript
谈一谈javascript中继承的多种方式
Feb 19 #Javascript
多种js图片预加载实现方式分享
Feb 19 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
PHP缓冲区用法总结
2016/02/14 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
js实现烟花特效
2020/03/02 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python计算一个序列的平均值的方法
2015/07/11 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
深入理解Python装饰器
2016/07/27 Python
python实现音乐下载器
2018/04/15 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python利用7z批量解压rar的实现
2019/08/07 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
大学生通用个人的自我评价
2014/02/10 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
村党建工作汇报材料
2014/11/02 职场文书
八年级英语教学反思
2016/02/15 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js