Bootstrap 每次打开弹出窗口内容重复

Question

我有一个动态填充的弹出窗口。当我关闭弹出窗口并再次打开它时，数据会重复。我想我已经分离出 .$tip.find('.popover-content')) 的部分解决方案。我不确定它应该去哪里。我已经测试过，但不确定 none 的解决方案是否有效。

弹出窗口内容 - 第一次打开：

弹出窗口内容 - 第二次打开：

jQuery:

$(".listcollect").on("click", function(event) {
    var listID = this.id;

    $.ajax({
        method: "GET",
        url: "/listing_collections/:id/listcollect",
        success: function(result) {
            var arrLen = result.length

            for (var i = 0; i < arrLen; i++) {
                var listingCollectionId = result[i]["id"];

                var $li = $("<li></li>");
                var $a = $('<a class="listing-collection-item"></a>');
                $a.attr("href", "javascript:void(0);");
                $a.data("listing-id", listID);
                $a.data("listing-collection-id", listingCollectionId);
                $a.text(result[i]["name"])
                $li.append($a)
                $(this).next().append($li)
            }
        }.bind(this)
    });

    return true;
});

HTML:

<div class="btn-group listcollect-wrapper">
   <a onclick="lcflash" class="listcollect dropdown-toggle" data-toggle='dropdown' type="button" id=<%= listing.id %>>Add to Listing Collection <span class="caret"></span></a>
   <ul class='dropdown-menu'>
   </ul>
</div>

Answer 1

如何关闭弹窗？如果未重置弹出窗口的内容，这种行为是正常的，因为每次打开弹出窗口时都会向其附加数据。

根据数据的动态程度，您可能希望在页面加载时加载所有数据。

我也可以是你的后端，出于某种原因可能会复制数据（但这种情况非常罕见）

Answer 2

假设 $(this) 是一个 <ul>，解决这个问题的一种方法是每次清空 <ul>。

尝试：$("ul").empty();开头。在你的情况下 $(this).empty();。

理想情况下，我认为您想在关闭弹出列表时清除它，但这是您的应用程序行为，您会更清楚。

您的代码：

$(".listcollect").on("click", function(event) {
    var listID = this.id;

    $(this).next().empty();//clears the list items.

    $.ajax({
        method: "GET",
        url: "/listing_collections/:id/listcollect",
        success: function(result) {
            var arrLen = result.length

            for (var i = 0; i < arrLen; i++) {
                var listingCollectionId = result[i]["id"];

                var $li = $("<li></li>");
                var $a = $('<a class="listing-collection-item"></a>');
                $a.attr("href", "javascript:void(0);");
                $a.data("listing-id", listID);
                $a.data("listing-collection-id", listingCollectionId);
                $a.text(result[i]["name"])
                $li.append($a)
                $(this).next().append($li)
            }
        }.bind(this)
    });

    return true;
});

Bootstrap 每次打开弹出窗口内容重复

Bootstrap Popover Content Duplicates on Each Open

javascript

jquery

ruby-on-rails

ajax

popover