JQuery能在新类出现时检测到它们吗？刚刚发布的新评论

Question

我有一个微博/评论系统，每次新的微博或评论被提交，页面刷新，以显示它。

由于我已经在表单上设置了ajax，所以现在我希望在不刷新页面的情况下使用micropost或添加。

到目前为止，我已经：

if @micropost.save
  format.js   { render :post_on_wall }
else
  format.js   { render :form_errors }
end

您不需要成为红宝石上的rails专家，就可以理解这段代码中发生了什么。如果表单通过了所有验证，并且用户在单击post之前实际上输入了一些有效的内容，那么"if @micropost.save“将是真的，它将在我命名为"post_on_wall”的文件中执行js。如果"@micropost.save“，则"form_errors”中的代码将被执行。

在form_errors中，我添加了一个警告，只是为了检查当用户输入任何内容并单击post时，微博并没有被发布。效果很好。

在"post_on_wall“文件中，我有以下内容：

$('.microposts').prepend('<%= j render("users/partials/microposts") %>');

这方面的问题是，它基本上抓取了正在呈现的"users/partials/microposts“文件中的所有微柱，然后将它们放在".microposts”div中的所有内容之上。即使是发布位于".microposts“顶部的微博的实际表单也被推倒在刚刚添加到页面的内容下面。

这是我的html结构。

<div class='cf' id='content'>
    <div id='leftColumn'>
    </div>
    <div class='microposts'>
    </div>
    <div id='rightColumn'>
  </div>
</div>

每个微博及其相关注释都存储在一个名为".postHolder“的类中。

我觉得我走错路了。该文件如下：“用户/部分/微博”指向基本上有代码，以帮助显示10个微博一次。这是用于与我所做的完全不同的事情(分页+无休止的滚动)。

无论如何，我觉得我应该如何接近这是如何发现新的帖子，刚刚发布。它应该被检测为一个新的".postHolder“类，然后在找到它之后，应该将它添加到”postHolder“列表的顶部，而不是替换它上面的微博表格。

我想创建一个单独的div来保存所有的微博，然后把这个div放在微博的下面。那样的话，我就不需要担心表单会被向下推，因为它不会在包含所有微柱的div中，实际上，这就是我将要预先准备的。

无论如何，我真的很想要一个例子或一些好的建议，可以帮助我实现这个特性。

谢谢你抽出时间问候我。

Answer 1

基于你的假设

1. 希望按降序排列的帖子
2. 希望将必须返回的数据量降到最低，以便进行

更新。

我建议您在成功提交帖子时，启动对服务器的AJAX调用，以获得比上次显示的帖子更近期的所有帖子。假设您死后的HTML可以概括如下

<div id='microposts'>
    <form id='new_post'></form>
    <div class='postholder' id='some-id-number'></div>
    <div class='postholder' id='some-older-id-number'></div>
    ...
</div>

我会从一个服务调用中得到作为返回html返回的新帖子

function getNewPosts(){
    $.ajax({
        url: 'Your-New-Posts-Url',
        data: {lastId: $('.postholder:first').attr('id')},
        success: function(newPosts){
            if(newPosts && newPosts.length > 0){
                $('.postholder:first').before(newPosts);
            }
        }
    });
}

您还可以使用setTimeout作为心跳来频繁调用getNewposts。

Answer 2

要回答标题问题，“JQuery能否检测到新类的出现？”：不行。

当新元素被添加到页面(DOMNodeInsertedIntoDocument)时，会触发一些事件，但这是完全没有效率的(并且不推荐)。

最好在添加新元素的代码中使用jQuery的.trigger()方法触发自定义事件。这样，您就可以通知独立模块有新的元素。

但是，当您寻找新元素上的事件处理程序注册时，您可能需要看看jQuery的.live()方法。