Question

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

由于我已经在我的表单上设置了ajax，我现在想要使用微博或在没有页面刷新的情况下添加。

到目前为止，我有：

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

你不需要成为rails专家的红宝石来了解这段代码中发生了什么。如果表单通过所有验证并且用户实际键入了有效的内容，然后单击post，则“if @ micropost.save”将为true，它将在我命名为“post_on_wall”的文件中执行js。如果“@ micropost.save”将执行“form_errors”中的代码。

在form_errors中我添加了一个警告，只是为了检查当用户没有输入并点击发布时微博没有发布。它工作正常。

在“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”的类中。

我觉得我的方式错了。这个文件：“users / partials / microposts”指向的代码基本上有助于一次显示10个微博。这用于与我正在尝试的完全不同的东西（分页+无限滚动）。

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

我正在考虑创建一个单独的div以容纳所有微博，然后将这个div放在微博表格下面......这样我就不用担心表格会被推下来，因为它不会在里面包含所有微博的div，实际上将是我将要提到的。

无论如何，我真的想要一个可以帮助我实现此功能的示例或一些好的建议。

感谢您的时间亲切的问候。

Answer 1

基于您的假设

希望按降序按时间顺序排列的帖子
希望最小化您必须返回更新的数据量

我建议您在成功提交帖子后，启动对服务器的AJAX调用，以使所有帖子比上次显示的帖子更新。假设您的postholder 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>

我会从服务电话

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()方法。

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

2 个答案: