最近写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. hdu 4025 2011上海赛区网络赛E 压缩 ***

    直接T了,居然可以这么剪枝 题解链接:点我 #include<cstdio> #include<map> #include<cstring> #define ll ...

  2. WPF中的依赖项属性

    Form cnblogs 桂素伟 随着WPF的推广,不得不重新拾起WPF来,因为这块的产品越来越多. 只能跟着MSDN来学了,所以想是在这里记录下学习的过程和对知识的理解. 先从最基本的吧,依赖项属性 ...

  3. android AsyncTask介绍（转）

    android AsyncTask介绍 AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接 ...

  4. 总结列表显示ListView知识点

    全选ListView的item条目 单选ListView的条目 多选ListView的item条目 自定义ArrayAdapter动态改变ListView的不同item样式 动态增加和删除ListVi ...

  5. ios程序后台运行设置(不是太懂)

    文一 我从苹果文档中得知,一般的应用在进入后台的时候可以获取一定时间来运行相关任务,也就是说可以在后台运行一小段时间. 还有三种类型的可以运行在后以, 1.音乐 2.location 3.voip 文 ...

  6. KMP模式匹配算法

    KMP模式匹配算法 相信很多人对于这个还有点不了解,或者说是不懂,下面,通过一道题,来解决软考中的这个问题! 正题: aaabaaa,其next函数值为多少? 对于这个问题,我们应该怎么做呢? 1.整 ...

  7. 神一般的数据结构--可持久化TREAP

    http://www.cnblogs.com/SymenYang/p/3576726.html

  8. nginx、php-fpm、mysql用户权限解析

    nginx本身不能处理PHP,它只是个web服务器.当接收到客户端请求后,如果是php请求,则转发给php解释器处理,并把结果返回给客户端.如果是静态页面的话,nginx自身处理,然后把结果返回给客户 ...

  9. CSS3 calc()的使用

    前言: 平时在制作页面的时候,总会碰到有的元素是100%的宽度.众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破.比如说,有一个边框,或者说有marg ...

  10. Swift3.0语言教程查找字符集和子字符串

    Swift3.0语言教程查找字符集和子字符串 Swift3.0语言教程查找字符集和子字符串,在字符串中当字符内容很多时,我们就需要使用到查找字符集或者子字符串的方法.以下我们将讲解3种查找字符集和子字 ...