問題描述
假設項目中有一個列表頁面，如下：
當點擊列表一行數據可以顯示詳情頁面，而詳情頁面的數據是根據當前行的數據作為參數，通過 ajax 請求到后台返回的數據，再根據返回的結果動態生成 html 頁面，如下：
但是，在動態生成的 html 頁面中綁定點擊事件運行無效
問題分析
在動態生成的 html 頁面中綁定點擊事件運行無效的原因，是因為這些動態加載的 html 頁面（圖二），是在列表數據頁面（圖一）的 html 元素、css、js 代碼加載完后，再添加的 html 元素。
在瀏覽器解析到圖一的 html 頁面元素時， 解析到 js 的這些綁定標簽事件的 js 代碼的時候，這些綁定事件的標簽元素還沒有生成，（因為 js 代碼加載完后，才會有這些綁定事件的標簽），所以這些 js 代碼的綁定的事件，根本就沒有綁定到這些動態加載的標簽上，所以 js 綁定事件是不可能觸發生效的。
解決方案
既然找到了問題原因，那如何解決呢？答案就是使用 JQuery 事件 的 delegate() 方法。
定義
-
delegate() 方法：為指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。
-
使用 delegate() 方法的事件處理程序適用於當前或未來的元素（比如由腳本創建的新元素）。
語法
$(selector).delegate(childSelector,event,data,function)
使用實例
向未來的元素添加事件處理程序
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").delegate("p","click",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>這是一個新段落。</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>這是一個段落。</p>
<p>請點擊任意一個 p 元素，它會消失。包括本段落。</p>
<button>在本按鈕后面插入一個新的 p 元素</button>
</div>
<p><b>注釋：</b>通過使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素會受到影響。</p>
</body>
</html>