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

我有以下弹出设置：

popover图标发射器

弹出内容

 
 
 
  Badge 
 
  Table 
 
  

* 将内容分配给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/