一個(gè)同時(shí)問我，JQuery事件綁定為什么不生效，最好通過查找，發(fā)現(xiàn)了問題。
一般而言，JQuery事件綁定不生效，是一些新手經(jīng)常遇到的問題，其實(shí)都是簡單的問題，大概分兩種情況。 先上代碼,以下兩個(gè)button的事件綁定都不生效。
<html>
<head>
<script src="../libs/jquery.js"></script>
<script type="text/javascript">
$("#button1").click(function () {
alert("button1 clicked");
});
$(function(){
var div = $("<div><button id = 'button2'>button2</button></div>");
var body = $(document.body);
body.append(div);
div.find("#button2").click(function () {
alert("button2 clicked");
});
div.remove();
body.append(div);
})
</script>
</head>
<body>
<div>
<button id = "button1">button1</button>
</div>
</body>
</html>
下面講述原理：
綁定事件在未加載完成之前
首先看button1的事件綁定，
$("#button1").click(function () {
alert("button1 clicked");
});
button1在未加載完成之前，通過$("#button1").click方法來進(jìn)行事件綁定，由于此時(shí)未加載完成，實(shí)際上$("#button1")是一個(gè)空數(shù)組，所以最終的結(jié)果是未對任何元素進(jìn)行事件綁定。 那么如何解決這個(gè)問題呢，其實(shí)這個(gè)問題本不應(yīng)該發(fā)生，一般新手比較容易出問題，解決的方式很簡單，把事件綁定放在加載完成之后，JQuery的做法是：
$(function(){
$("#button1").click(function () {
alert("button1 clicked");
});
})
綁定事件后移除了元素重新加入
再看button2，button2首先通過JQuery 的方法被創(chuàng)建出來，然后被加入到body中，然后綁定事件，之后從body中移除，然后在加入body中：
var div = $("<div><button id = 'button2'>button2</button></div>");
var body = $(document.body);
body.append(div);
div.find("#button2").click(function () {
alert("button2 clicked");
});
div.remove();
body.append(div);
})
此時(shí)點(diǎn)擊也不會生效，這是因?yàn)?，在從文檔中移除的時(shí)候，JQuery 會自動把綁定的事件移除掉了，然后在加入的時(shí)候，事件綁定已經(jīng)不存在了；這種情況應(yīng)該如何解決呢？ 一般來說，如果某些元素存在頻繁的添加 移除 在添加的操作，可以考慮delegate的方式，比如：
var div = $("<div><button id = 'button2'>button2</button></div>");
var body = $(document.body);
body.delegate('#button2','click',function(){
alert("button2 clicked");
});
body.append(div);
// div.find("#button2").click(function () {
// alert("button2 clicked");
// });
div.remove();
body.append(div);
總結(jié)
最終正確的代碼如下：
<html>
<head>
<script src="../libs/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#button1").click(function () {
alert("button1 clicked");
});
var div = $("<div><button id = 'button2'>button2</button></div>");
var body = $(document.body);
body.delegate('#button2','click',function(){
alert("button2 clicked");
});
body.append(div);
div.remove();
body.append(div);
})
</script>
</head>
<body>
<div>
<button id = "button1">button1</button>
</div>
</body>
</html>
根據(jù)留言建議，可以考慮把delegate 改成on，也是一樣的，而且官方建議用on,如下：
body.on('#button2','click',function(){
alert("button2 clicked");
});
