关于新增元素使用jQuery on()方法重复绑定的问题
最近写ajax新增元素button绑定click事件的时候发现元素重新添加进来的时候会多执行一次事件函数,找了半天,怀疑是on()的问题,于是测试了一下,果然是因为on()的使用方式造成了有的新增元素会执行多次绑定事件函数。
当使用$(document).find('target-selector').on(event,function);时,必须在元素每次添加进来之后重新绑定,否则会无效。
而使用$(document).on(event,selector,function);时,只需执行一次绑定即可,可以在开头就写好绑定,对后面添加进来的元素都有效,如果在元素每次添加进来之后都绑定,则绑定了几次,触发事件的时候就会执行几次事件函数。
下面是一个测试来说明这个问题(需要jQuery)。
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<title>Just a test.</title>
<style>
button {
margin: 10px;
}
</style>
<script>
$(document).ready(function() {
$('.addOnTest').click(function() {
var buttons = '<button class="onTest1">使用.find().on(event,function)的按钮</button><button class="onTest2">使用.on(event,selector,function)的按钮</button>';
$('.test').append(buttons);
});
$('.delOnTest').click(function() {
$('.onTest1').remove();
$('.onTest2').remove();
});
$('.ontest').click(function() {
$(document).find('.onTest1').on('click', function() {
alert('111');
});
$(document).on('click', '.onTest2', function() {
alert('222');
});
});
});
</script>
</head> <body>
<div class="test">
<button class="addOnTest">新增两种类型的按钮</button>
<button class="delOnTest">删除两种类型的按钮</button>
<br />
<button class="ontest">为新增按钮绑定事件</button>
<br />
</div>
<p>测试步骤:
<br /> 1、点击“新增两种类型的按钮”新增两个不同类型的按钮
<br /> 2、点击“为新增按钮绑定事件”分别为两个新增按钮绑定点击事件
<br /> 3、分别点击新增的两个按钮,可以发现,两个按钮点击时都执行了绑定的事件(都有alert)
<br /> 4、点击“删除两种类型的按钮”,再点击“新增两种类型的按钮”
<br /> 5、分别点击新增的两个按钮,可以发现,第一个按钮不执行绑定事件(没有alert),第二个按钮执行了绑定事件(有弹出alert窗口)
<br /> 6、点击“为新增按钮绑定事件”
<br /> 7、分别点击新增的两个按钮,可以发现,第一个按钮执行了一次绑定事件(一个alert),而第二个按钮执行了两次(两个alert)
<br />
</p>
</body> </html>
所以,对新增的元素,要么每次都使用.on(event,function);绑定,要么只要使用$(document).on(event,selector,function);绑定一次就好了。
前端小白渣代码求轻喷~
关于新增元素使用jQuery on()方法重复绑定的问题的更多相关文章
- jquery on()方法重复绑定解决方法
最近再一次项目中发现 不刷新页面的情况下使用on()方法绑定事件会出现重复执行的问题,意思就是说点击一次会绑定一次...点击n次会绑定n次,执行起来是以你绑定的次数为准,绑定了n次就会执行n次 解决办 ...
- 【转】HTML5新增元素兼容旧浏览器方法
ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...
- jquery中事件重复绑定以及解绑问题
一般的情况下,对于这种情况,我们常规的思路是,先解绑,再绑定,如下: $(selector).unbind('click').bind('click',function(){....}); 当这样会有 ...
- jQuery 滑动方法slideDown向下滑动元素
通过 jQuery可以在元素上创建滑动效果,jQuery slideDown() 方法用于向下滑动元素. jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以 ...
- jquery为新增元素添加事件
<script type="text/javascript"> var $id=1; $(function(){ $(".hehe").click( ...
- JS Jquery去除数组重复元素
js jquery去除数组中的重复元素 第一种:$.unique() 第二种: for(var i = 0,len = totalArray_line.length;i < len;i++) { ...
- jquery事件重复绑定的几种解决方法 (二)
防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法 一.bind().unbind()方法 bind();绑定事 ...
- jquery事件重复绑定的几种解决方法
防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法 一.bind().unbind()方法 bind();绑定事 ...
- 解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&q ...
随机推荐
- 在ASP.NET 5中使用SignalR
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:SignalR作为ASP.NET中进行Web实时双向通信的组件,在ASP.NET 5中 ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...
- Android中常用的五种数据存储方式
第一种: 使用SharedPreferences存储数据 适用范围: 保存少量的数据,且这些数据的格式非常简单:字符串型.基本类型的值.比如应用程序的各种配置信息(如是否打开音效.是否使用震动效果.小 ...
- 【T_SQL】 基础 续+++
十五.T-SQL 编程 1.变量 (1)局部变量 A.局部变量必须以标记@作为前缀 ,如@age. B.局部变量的使用也是先 ...
- MFC GDI绘图基础
一.关于GDI的基本概念 什么是GDI? Windows绘图的实质就是利用Windows提供的图形设备接口GDI(Graphics Device Interface)将图形绘制在显示器上. 在Wind ...
- 【File】递归删除文件夹中子级文件/夹,并删除文件夹
今天有这样一个需求,需要删除某一个文件夹,但是文件夹中还有子级的文件 或者还可能会有文件夹在里面,所以就需要使用一个简单的递归才能将文件夹删除成功,包括文件夹中的子级文件/夹.!!! 其实很简单,就一 ...
- hdu 5690 All x
All X Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submiss ...
- TweenMax参数补充
构造函数:TweenMax(target:Object, duration:Number, vars:Object) target:Object -- 需要缓动的对象 duration:Number ...
- 20145223《Java程序程序设计》第4周学习总结
20145223 <Java程序设计>第4周学习总结 教材学习内容总结 面向对象中,子类继承父类避免重复的行为定义,不过并不是为了避免重复定义行为就使用继承.程序代码重复在以后修改代码的时 ...
- [bzoj4514]数字配对[费用流]
今年SDOI的题,看到他们在做,看到过了一百多个人,然后就被虐惨啦... 果然考试的时候还是打不了高端算法,调了...几天 默默地yy了一个费用流构图: 源连所有点,配对的点连啊,所有点连汇... 后 ...