问题描述

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 日
喜欢我的文章吗?
别忘了点赞或赞赏,让我知道创作的路上有你陪伴。