2

我有以下弹出框设置：

弹出图标启动器

 <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>

*将内容分配给弹出框的脚本

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

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

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


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

        });

这工作正常。但是当我关闭弹出框并单击图标以再次显示弹出框时，更改不会保留。

任何建议将不胜感激。

4

1 回答 1

2

这里的问题是您将#settings-layout-contenthtml 的副本发送到 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/

于 2012-10-28T11:43:46.193 回答