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 相关文章推荐
JQuery 入门实例1
Jun 25 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
微信小程序自定义胶囊样式
Dec 27 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
javascript demo 基本技巧
2009/12/18 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python编程之序列操作实例详解
2017/07/22 Python
Python logging模块用法示例
2018/08/28 Python
Python 字符串换行的多种方式
2018/09/06 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
感恩教育月活动总结
2014/07/07 职场文书
挂靠协议书
2015/01/27 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
Node实现搜索框进行模糊查询
2021/06/28 Javascript
JavaScript原型链详解
2021/11/07 Javascript
HTTP中的Content-type详解
2022/01/18 HTML / CSS
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript