最近写ajax新增元素button绑定click事件的时候发现元素重新添加进来的时候会多执行一次事件函数，找了半天，怀疑是on()的问题，于是测试了一下，果然是因为on()的使用方式造成了有的新增元素会执行多次绑定事件函数。
当使用$(document).find('target-selector').on(event,function);时，必须在元素每次添加进来之后重新绑定，否则会无效。
而使用$(document).on(event,selector,function);时，只需执行一次绑定即可，可以在开头就写好绑定，对后面添加进来的元素都有效，如果在元素每次添加进来之后都绑定，则绑定了几次，触发事件的时候就会执行几次事件函数。
下面是一个测试来说明这个问题（需要jQuery）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| <!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);绑定一次就好了。