如何在动态添加的内容上运行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>

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

<!--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上的工作原理与charm相似，但是在动态添加的每个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 ，它通常过于宽泛。