javascript - 每次打开时 Bootstrap 弹出窗口内容都会重复

Question

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

弹出内容 - 第一次打开:

弹出内容 - 第二次开幕:

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