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

Question

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

在以下示例中：

1. 帖子使用“mypost”类标识。
2. post-new-comment 按钮是具有“send-comment”类的 div。
3. 滚动到底部后，更多帖子会使用我未在此处编写的脚本动态加载。
4. 当您点击“send-comment”时，会调用一个脚本并且 评论已添加到数据库中。

这是页面的一部分。

<!--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>

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

<!--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>

问题如下：发送 cmets 的脚本在现有 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/

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