如何讓動態創建的頁面元素響應用戶事件 (HTML/javascript/jQuery/Ajax/DOM)

平時很少涉及有關 Web 的項目，這次運氣好被指派了一個 (@_@);;;

這個項目用到了 DOM、Ajax、jQuery 等方面的技術，還好有點基礎，搞搞弄弄也就開始手順了，其間遇到一個小問題：利用 Ajax 或 DOM 動態創建的一個或多個對象不再響應當初定義的用戶事件。

例如：

頁面中包含多個 a 元素，其 href 都包含前導字符 # ，利用 jQuery 定義了 click 事件的處理函數，工作正常。

$('a[href^="#"]').click( function () { alert(this.hash); });  

可運行時通過動態創建的 a 元素，則不再響應上面定義的用戶事件了。

到網上搜了搜，在
jQuery API Documentation (英文)
jQuery API 中文文檔 (WEB前端開發)
中找到了關於該問題的說明。

產生該問題的原因，是由於頁面生成時註冊的事件處理函數僅對註冊時存在的元素產生影響，而動態創建的則被忽略了。

那麼，如何讓動態創建的對象也能響應用戶事件呢? 這裏有一個比較簡單的方法，即使用 live() on() 函數：

$(document).on('click', 'a[href^="#"]', function () { alert(this.hash); });

現在問題解決啦 (^___^)

當然，還有其他的方式，例如通過 bind() 函數解決該問題，但需要注意的是：

jQuery 在不同版本中對事件的綁定處理是不一樣的，jQuery 1.4.2 將會對同一元素上多次綁定的相同事件執行多次，不會像早期版本中那樣，對相同事件進行過濾處理。