最近写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()方法重复绑定的问题的更多相关文章

  1. jquery on()方法重复绑定解决方法

    最近再一次项目中发现 不刷新页面的情况下使用on()方法绑定事件会出现重复执行的问题,意思就是说点击一次会绑定一次...点击n次会绑定n次,执行起来是以你绑定的次数为准,绑定了n次就会执行n次 解决办 ...

  2. 【转】HTML5新增元素兼容旧浏览器方法

    ref:http://www.jb51.net/html5/163906.html 问题:如何让IE8-兼容这些标签?(需要设计JS中的DOM) 代码如下: <span style=" ...

  3. jquery中事件重复绑定以及解绑问题

    一般的情况下,对于这种情况,我们常规的思路是,先解绑,再绑定,如下: $(selector).unbind('click').bind('click',function(){....}); 当这样会有 ...

  4. jQuery 滑动方法slideDown向下滑动元素

    通过 jQuery可以在元素上创建滑动效果,jQuery slideDown() 方法用于向下滑动元素. jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以 ...

  5. jquery为新增元素添加事件

    <script type="text/javascript"> var $id=1; $(function(){ $(".hehe").click( ...

  6. JS Jquery去除数组重复元素

    js jquery去除数组中的重复元素 第一种:$.unique() 第二种: for(var i = 0,len = totalArray_line.length;i < len;i++) { ...

  7. jquery事件重复绑定的几种解决方法 （二）

    防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法 一.bind().unbind()方法 bind();绑定事 ...

  8. jquery事件重复绑定的几种解决方法

    防止事件重复绑定共有4种方法: bind().unbind()方法 live().die()方法 off().on()方法 one()方法 一.bind().unbind()方法 bind();绑定事 ...

  9. 解析Jquery取得iframe中元素的几种方法

    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...

随机推荐

  1. android 入门-本地化语言

    打包安装到手机上,改变手机系统语言,你在看看是不是改变了.哇.真的可以.

  2. ortp库入门

    转自:http://blog.csdn.net/suer0101/article/details/7333267 再补充一个代码走读:http://www.xuebuyuan.com/1863409. ...

  3. linux应用程序地址布局,王明学learn

    linux应用程序地址布局 在学习Linux应用程序开发时,经常会遇到如下概念:代码段.数据段.BSS段(Block Started by Symbol,又名:未初始化数据段).堆(heap)和栈(s ...

  4. C语言字符串长度（转）

    C语言字符串长度的计算是编程时常用到的,也是求职时必考的一项. C语言本身不限制字符串的长度,因而程序必须扫描完整个字符串后才能确定字符串的长度. 在程序里,一般会用strlen()函数或sizeof ...

  5. 战斗住的DPS才是DPS，持续的执行力才是执行力

    工作久了,真的发现执行力这个东西太难被贯彻,计划时信心满满,冲劲十足,持续一段时间后就喇叭腔了.

  6. 【bootstrapValidator 不验证】使用bootstrapValidator 验证效果不起作用

    虽然在页面ready的时候 就绑定了验证表单 ,但是在点击提交按钮之后 依旧没有验证的效果 . 那就在提交按钮的点击事件中 添加一句话: $(document).ready( function () ...

  7. Laravel之Service Container服务容器

    managing class dependencies and performing dependency injection. Dependency injection is a fancy phr ...

  8. c#写windows服务（转）

    序言 前段时间做一个数据迁移项目,刚开始用B/S架构做的项目,但B/S要寄存在IIs中,而IIs又不稳定因素,如果重启IIs就要打开页面才能运行项目.有不便之处,就改用Windows服务实现.这篇就总 ...

  9. asp.net正则表达式提取网页网址、标题、图片实例以及过滤所有HTML标签实例

    无论你用什么语言,正则表达式的处理方法都是非常灵活.高效的,尤其是对某些字符串的抓取.过滤方面,更显其优势. 正则表达式的写法通常比较简单,几行短代码便能轻松完成看似很复杂的事情,更值得称赞的是,它的 ...

  10. ios开发-载入viewcontroller的几种方式

    Assuming you have storyboard, go to storyboard and give your VC an identifier (inspector), then do: ...