Question

我有以下弹出设置：

popover图标启动器

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

弹出内容

<div id="settings-layout-content" style="display:none;">
                                 <ul style='margin-left:5px;' >
        <li class='popover-list layout-list' data-id="badge">

            <label class='icon-ok' style='color:#6ABD3D !important;position:relative;right:5px;'></label>
            <label class='icon-th' style='position:relative; top:1px;right:4px;'></label>Badge
           </li>

        <li class='popover-list layout-list' data-id="table">

            <label class='icon-ok' style='color:#6ABD3D !important;position:relative;right:5px;'></label>
            <label class='icon-table' style='position:relative; top:1px;right:4px;'></label>Table

        </li>

    </ul>
   </div>

* 将内容分配给popover的脚本

$('.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");

        });

这很好用。但是，当我关闭弹出窗口并单击图标以再次显示弹出窗口时，更改不会保留。

任何建议都将受到高度赞赏。

Answer 1

这里的问题是您要将#settings-layout-content html的副本发送到要显示的Popover插件。单击弹出窗口中的列表项时，更改将应用于复制的元素，当弹出窗口关闭时，这些元素将被销毁。

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

// .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()已被弃用，建议从现在开始使用.on()。

这是一个如何运作的演示：http://jsfiddle.net/ZdJUC/1/

修改引导程序Popover Html内容不会持久存在

1 个答案: