最近写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. <转>WCF实例化模式与高并发处理

    WCF实例化模式与高并发控制 1.实例化模式InstanceModel 1.1 PerCall:单调模式 每次调用都会产生一个实例 例[ServiceBehavior(InstanceContextM ...

  2. codeforce好地方啊 Bear and Elections *

    Codeforces Round #318 居然可以看测试数据,哪里没过一目了然,哈哈哈 #include<cstdio> #include<iostream> #includ ...

  3. 利用IdentityServer3在ASP.NET 5和Angular中实现OAuth2 Implicit Flow

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:之前介绍过的IdentityServer3虽然是基于Katana开发的,不过同样可以托 ...

  4. HR外包系统 - 客户公司薪资规则 报表需求 记入系统

    1 薪酬规则,包括 常用薪资项目 2 报表需求,特别是报表排序规则 3 特殊项说明记录 另外包括客户公司监控的日期设置

  5. 接口API测试和返回值JSON解析的插件

    火狐插件1.   HttpRequest作用:接口API测试例子:http://192.168.10.61:8080/ZHCS/user/loginApp.do?phone=admin&pwd ...

  6. LeetCode——Rotate Image（二维数组顺时针旋转90度）

      问题: You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockw ...

  7. MySQL的中文编码问题

    创建表格时,怎么让表格显示中文?注意:不区分大小写 mysql> ALTER TABLE 表格的名字 CONVERT TO CHARACTER SET UTF8; 怎么让默认的数据库支持中文字符 ...

  8. 如何把Eclipse工程导入到Android Studio

      1 在Eclipse中新建android项目androiddemo.里面只有一个MainActivity,主要是使用fastjson将一个Person对象转化成字符串. 2 在项目上点击右键-&g ...

  9. Windows服务定时执行任务

    1.创建多线程类 /// <summary> /// 多线程 /// </summary> public abstract class MuliThread<T> ...

  10. AJAX案例四：省市联动

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...