使用 Ajax 加载更多内容后的 DOM 问题 - SilverStripe答案

【问题标题】：DOM issue after loading more with Ajax - SilverStripe使用 Ajax 加载更多内容后的 DOM 问题 - SilverStripe
【发布时间】：2016-11-02 01:04:03
【问题描述】：

我正在使用包含加载更多 Ajax 的 SilverStripe 处理页面。这是html结构

<div id="pagination"...>
    // items goes here
</div>
<div id="loadmore"...>
    // load more button
</div>

只要有 Ajax 调用，#pagination div 就会清空自身并附加响应数据。由于加载更多按钮需要更新链接，我将其包含在响应数据中（使用模板渲染）。

success: function(data) {
    loadmore.remove();
    container.empty();
    container.append(data);
}

然而，这会导致一个问题，即加载更多的 div 嵌套在 Ajax 之后的 pagination div 内。

知道如何克服这个问题吗？

【问题讨论】：

更新：虽然解决方案不是很专业，但我终于成功了。我在 html 中添加了一条评论，并按该评论拆分了回复。 pagination div 附加第一个拆分字符串，包含 pagination 和 loadmore 的大 div 将附加第二个拆分字符串。虽然我真的希望有更好的解决方案
你可以用你的解决方案写一个答案，并在一段时间后自我接受。
只需创建一个仅包含“分页”的模板并通过 AJAX 返回？在 JS 中你可以这样做：$("#pagination").replaceWith($(data));
@bummzack 事情是，当ajax加载时，loadmore div也需要更新。如果我做replaceWith我认为它类似于empty（）然后append（），并且loadmore div将嵌套在分页中

标签： jquery ajax silverstripe

【解决方案1】：

您可以将模板更改为如下所示：

<div id="wrapper">
    <div id="pagination"...>
        // items goes here
    </div>
    <div id="loadmore"...>
        // load more button
    </div>
</div>

然后做：

success: function(data) {
    $("#wrapper").replaceWith($(data));
}

如果你不想添加额外的 DOM 节点，你可以重写你的回调处理程序，如下所示：

success: function(data) {
    var content = $(data);
    $("#pagination").replaceWith(content.filter("#pagination"));
    $("#loadmore").replaceWith(content.filter("#loadmore"));
}

【讨论】：