javascript - 如何在动态添加的内容上运行 jQuery？

Question

我制作了一个非常类似于 Facebook 墙页的页面:有一些帖子、每个帖子的评论列表和一个“发送”按钮，每个帖子都有一个发送新评论的按钮。

在下面的例子中:

1. 帖子被标识为“mypost”类。
2. 发表新评论按钮是类为“发送评论”的 div。
3. 滚动到底部后，将使用我未在此处编写的脚本动态加载更多帖子。
4. 当你点击“发送评论”时，一个脚本被调用并且评论被添加到数据库中。

这是页面的一部分。

<!--my first post-->
<div id="div1" class="mypost">
    <div class="send-comment"></div>
</div>
<!--my second post-->
<div id="div2" class="mypost">
    <div class="send-comment"></div>
</div>

<!--my js code-->
<script text="type/javascript">
    $('.send-comment').click(function(){
        //send comment
    });
</script>

当用户向下滚动页面时，其他帖子被注入(inject)页面，结果如下:

<!--my first post-->
<div id="div1" class="mypost">
    <div class="send-comment"></div>
</div>
<!--my second post-->
<div id="div2" class="mypost">
    <div class="send-comment"></div>
</div>
<!--third post, added dynamically with jQuery-->
<div id="div3" class="mypost">
    <div class="send-comment"></div>
</div>

<!--my js code-->
<script text="type/javascript">
    $('.send-comment').click(function(){
        //send comment
    });
</script>

问题如下:发送评论的脚本在现有的 div 上运行正常，但在动态添加的每个 div 上，没有任何效果。没有检测到点击。没有任何反应。

更一般地说，我找不到使任何类型的脚本在用户操作后添加的 div(或任何其他 html 标记)上工作的方法。

有人可以提出解决此问题的解决方案吗？

Answer 1

试试这个:

<script text="type/javascript">
    $(document).on('click', '.send-comment', function(){
        //send comment
    });
</script>

on 允许您将处理程序附加到元素，即使它们尚不存在于 DOM 中。引用:http://api.jquery.com/on/

您可能希望从此绑定(bind)函数中替换 document，它通常过于宽泛。