Question

我有一个动态填充的popover。当我关闭弹出框并再次重新打开它时，数据将被复制。我想我已经将部分解决方案分离到了.$tip.find('.popover-content'))。我不知道它应该去哪里。我已经测试过并且不确定，因为没有一个解决方案有效。

Popover内容 - 第一次开幕：

Popover内容 - 第二次开幕：

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

假设$(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;
});

Answer 2

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

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

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

每次打开时Bootstrap Popover内容重复

2 个答案: