DOM 使用 Ajax 加载更多后出现问题 - SilverStripe

Question

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

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

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

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

然而，这会导致加载更多 div 嵌套在 Ajax 之后的 pagination div 中。

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

Answer 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"));
}

DOM 使用 Ajax 加载更多后出现问题 - SilverStripe

DOM issue after loading more with Ajax - SilverStripe

ajax

jquery

silverstripe