修改自举程序Popover HTML内容不会持久 [英] Modifying bootstrap Popover Html content does not persist

问题描述

我具有以下弹出窗口设置:

I have the following popover settings:

弹出图标启动器

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

Popover内容

<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之一时，我将内容修改如下:

Now when I click on one of the li inside the content of the popover I modify the content as follow:

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


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

        });

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

This works fine. But when I close the popover and click on the icon to show the popover again, the changes are not persisted.

任何建议将不胜感激.

推荐答案

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

The problem here is that you are sending a copy of the #settings-layout-content html to the Popover plugin to display. When you click on the list item in your popup the changes get applied to the elements that were copied and when the popup is closed those elements get destroyed.

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

To keep the changes you need to apply them to the original element that you are copying into the popup content:

// .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()，建议使用

Also .live() is deprecated, it's advised to use .on() from now on.

这是其工作方式的演示: http://jsfiddle.net/ZdJUC/1/

Here's a DEMO of how that works: http://jsfiddle.net/ZdJUC/1/

这篇关于修改自举程序Popover HTML内容不会持久的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！