最近寫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);綁定一次就好了。
前端小白渣代碼求輕噴~