最近写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. 利用Browser Link提高前端开发的生产力

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Browser Link是VS 2013开始引入的一个强大功能,让前端代码(比如Ang ...

  2. 直接拿来用！最火的Android开源项目（二）(转)

    GitHub上的开源项目不胜枚举,通过这些项目,也能让开发者在应用开发过程中事半功倍,作为开发者的你,在用这些开源项目吗?今天我们将介绍另外20个在GitHub上备受欢迎的Android开源项目,你准 ...

  3. 在Salesforce中将 Decimal 数据转换成美元格式

    闲言少叙,直接上代码(Apex Class 中的方法): private string ConvertToMoneyFormat(decimal price){ if (price == null | ...

  4. 2016 ACM/ICPC Asia Regional Dalian Online HDU 5877 Weak Pair treap + dfs序

    Weak Pair Problem Description   You are given a rooted tree of N nodes, labeled from 1 to N. To the  ...

  5. POJ 3140 Contestants Division 树形DP

    Contestants Division   Description In the new ACM-ICPC Regional Contest, a special monitoring and su ...

  6. hdu 4281(MTSP)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4281 题意:给出N个点,第一个点是裁判,其他N-1个点需要裁判过去回答问题,每个点需要的时间不一样,而 ...

  7. pig的各种运行模式与运行方式详解

    一.pig的运行模式: Pig 有两种运行模式: Local 模式和 MapReduce 模式.当 Pig 在 Local 模式运行的时候, Pig 将只访问本地一台主机:当 Pig 在 MapRed ...

  8. ReportNg 测试报告的定制修改【转】

    前言 前段时间在Testerhome上面看到了测试报告生成系列之-------如何用 testNG 生成测试报告 简单的描述了一些测试报告的生成,接着有人在评论中回复说可以针对reportNg的测试报 ...

  9. GridView中超链接设置

    <%# Eval("id") %>Bind方式    <%# Bind("id","~/info.aspx?id={0}" ...

  10. ural 1142. Relations

    1142. Relations Time limit: 1.0 secondMemory limit: 64 MB Background Consider a specific set of comp ...