Question

我制作了一个与Facebook壁页非常相似的页面：每个帖子都有一些帖子，评论列表和每个帖子的“发送”按钮，以发送新评论。

在以下示例中：

该帖子标有“mypost”类。
post-new-comment按钮是带有“发送 - 评论”类的div。
滚动到底部后，会动态加载更多帖子，并附上我未在此处写的脚本。
当您点击“发送评论”时，会调用一个脚本并且评论被添加到数据库中。

以下是该页面的一部分。

<!--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上就像魅力一样，但在动态添加的每个div上都没有效果。没有检测到任何点击。没有任何事情发生。

更一般地说，我无法找到一种方法，可以在用户操作后添加任何类型的脚本（或任何其他html标记）。

Cany有人提出解决方案来解决这个问题吗？

Answer 1

试试这个：

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

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

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

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

1 个答案: