Jquery 修改引导Popover Html内容不会持久

我有以下popover设置：

弹出式图标启动器

 <label id="settings-layout" class="icon-th" rel="popover" data-original-title="Switch Layout"></label>

$('.icon-th').popover({
            html: true, placement: 'bottom',
            trigger: 'manual', content: function () { return $('#settings-layout-content').html(); }
        }).click(function (e) {
            $('.icon-font').popover('hide');
            $('.icon-filter').popover('hide');
            $(this).popover('toggle');
            e.stopPropagation();
        });

现在，当我单击popover内容中的一个li时，我修改内容如下：

$('.layout-list').live('click', function () {


            $(this).find(">:first-child").addClass("display");

        });

这个很好用。但当我关闭popover并单击图标再次显示popover时，更改不会持久化

---

如果您有任何建议，我们将不胜感激。

这里的问题是您正在向Popover插件发送一份

#settings layout content

html的副本以供显示。当您单击弹出窗口中的列表项时，更改将应用于已复制的元素，当弹出窗口关闭时，这些元素将被销毁

要保留更改，您需要将其应用于要复制到弹出内容中的原始元素：

// .live() is deprecated, use .on() instead
$(document).on('click', '.layout-list', function () {

    // get clicked item index used to matched the same element in the original content
    var itemIndex = $(this).index();

    // get original element that holds the popover content
    var orig = $('#settings-layout-content').find('.layout-list:eq(' + itemIndex + ')');

    // add the class to the original content
    orig.children(":first").addClass("display");

    // close the popover
    $('#settings-layout').popover('hide');
});

也不推荐使用，建议从现在开始使用

下面是如何工作的演示：

// .live() is deprecated, use .on() instead
$(document).on('click', '.layout-list', function () {

    // get clicked item index used to matched the same element in the original content
    var itemIndex = $(this).index();

    // get original element that holds the popover content
    var orig = $('#settings-layout-content').find('.layout-list:eq(' + itemIndex + ')');

    // add the class to the original content
    orig.children(":first").addClass("display");

    // close the popover
    $('#settings-layout').popover('hide');
});