如何让动态创建的页面元素响应用户事件 (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 将会对同一元素上多次绑定的相同事件执行多次，不会像早期版本中那样，对相同事件进行过滤处理。