为js动态创建的元素绑定事件

问题描述

handsome主题评论的时候，如果是子评论，评论内容前面会有一个 @某人 的锚点链接。

由于主题顶部的导航占用了50px的高度，所以点击锚点链接的时候必须向下偏移原来的位置50px，才能正常显示。

但是，对于ajax生成的评论， 如果不刷新页面的话，点击子评论左边的锚点链接却不会向下偏移 。

即：以前写的js对动态生成的页面元素不管用！

举个很简单的demo，见下面的代码：

<html>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").bind("click",function(){
    $(this).slideToggle();
  $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");
</script>
</head>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</body>
</html>

这段代码很简单。有两个功能：

点击按钮会插入一个 <p> 标签及其内部内容
点击 p标签 会隐藏或显示当前 p 元素

但是这段代码的问题是：

点击按钮生成 p 标签，如果点击生成的这个 p 标签，则无法隐藏或显示当前 p 元素。

问题出在哪儿呢？

解决方法

原因在于，浏览器解析js代码的时候，会寻找当前页面的所有 p 标签，并给每个 p 标签绑定上相关事件（slideToggle()）。

但是 未来动态生成的 p 标签 却无法再次重新绑定相关的事件了！因为js已经被浏览器解析完了

这里可以使用jQuery中的 delegate() 方法。

我们通过 bind 绑定的点击（click）事件，只适用于当前页面的元素

使用 delegate 绑定的点击事件，却可以适用于 当前或未来的元素 （比如由脚本创建的新元素）。

所以核心代码改成

$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
});

delegate 的语法是：

$(selector).delegate(childSelector,event,data,function)

简单来说，即为指定元素（ selector ）的子元素（childSelector），监听某些事件（event），绑定相关函数（function）。

该bug会在handsome v3.3.0 版本中得到解决

参考文章

js动态加载HTML元素时出现的无效的点击事件 - 何甘霖 - 博客园