<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function () {
// 1綁定事件
$(".btn").click(function (event) {
console.log("aaa");
});
// 2替換dom元素後，再次點擊，就沒有事件了。
$("input").click(function () {
$("#parent").html($("#hide")[0].innerHTML);
});
});
</script>
</head>
<body>
<div id="parent">
<button class='btn'>按鈕</a>
</div>
<div style="display:none" id="hide">
<button class='btn'>按鈕</a>
</div>
<input type="button" value="replace"/>
</body>
</html>
1.頁面加載完成，div初次加載就有button節點，此時是沒有問題的。
2.使用局部刷新改變div的內容後，初次加載的時候事件已經綁定過了節點對象，使用局部刷新後，雖然節點名稱參數都是一模一樣的，但是已經不是同一個DOM對象了，所以刷新後綁定的事件會失效。
解決方法：
//用on委託代理的方式綁定。只要父元素是一開始就存在的，將事件委託給這個父元素。
//委託的原理：一開始給btn綁定的事件會冒泡到父元素。父元素也綁定了click事件，此後就會觸發父元素的點擊事件。
$("#parent").on('click','.btn',function(){
console.log("bbb");
})