友人C

为js动态创建的元素绑定事件
问题描述 handsome主题评论的时候,如果是子评论,评论内容前面会有一个@某人的锚点链接。 由于主题顶部的导航...
右键或长按保存图片
01
2017/08

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

问题描述

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元素时出现的无效的点击事件 - 何甘霖 - 博客园

最后修改:2017 年 08 月 01 日 01 : 19 AM
如果觉得我的文章对你有用,请随意赞赏

6 条评论

  1. 1900

    这个挺好用的。

  2. 尚寂新

    看到你在首页的公告了...
    其实有个事...新增接入备案是不用关站的
    只要icp号还有就可以一直开着

    1. 友人C
      @尚寂新

      我的icp号好像被注销了。。。但是腾讯云还是显示正常,不知道是不是腾讯云还没有检查出来

      1. 尚寂新
        @友人C

        去icp公共查询那块查一下吧 那块实时准
        对了你handsome主题的帮助文档的那个...是jelly的?(表示我已fork正在用23333,被我魔改的不成样子)#(滑稽)

        1. 友人C
          @尚寂新

          不是,有一个项目叫docsify 在GitHub搜索一下就能找到了,用来写文档很方便ヾ(≧∇≦*)ゝ

          1. 尚寂新
            @友人C

            那...我刚才看github上的demo比你这用的少一个index.html里的js...也应该是基于原项目改了吧φ( ̄∇ ̄o)

发表评论