问题描述

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

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

为此，之前写了一个解决方法：锚点链接跳转后位置上下偏移一定位置方法

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

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

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

<html>
<head>
<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>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
</body>
</html>

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

  1. 点击按钮会插入一个<p>标签及其内部内容
  2. 点击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元素时出现的无效的点击事件 - 何甘霖 - 博客园

最后修改：2019 年 03 月 23 日
© 允许规范转载
喜欢我的文章吗？
别忘了点赞或赞赏，让我知道创作的路上有你陪伴。