如何在dynamic元素上绑定引导弹窗

我在dynamic列表中使用Twitter Bootstrap的popup窗口。 列表项有一个button,当我点击button,它应该显示popup窗口。 当我在非dynamictesting时,它工作正常。

这是我的非dynamic列表的JavaScript

$("button[rel=popover]").popover({ placement : 'right', container : 'body', html : true, //content:" <div style='color:red'>This is your div content</div>" content: function() { return $('#popover-content').html(); } }) .click(function(e) { e.preventDefault(); }); 

但是,它在dynamic列表上不能正常工作。 它可以显示出来,当我点击button“两次”,只显示我点击第一时间的列表项目之一。

MY html:

  <ul id="project-list" class="nav nav-list"> <li class='project-name'> <a >project name 1 <button class="pop-function" rel="popover" ></button> </a> </li> <li class='project-name'> <a>project name 2 <button class="pop-function" rel="popover" ></button> </a> </li> </ul> <div id="popover-content" style="display:none"> <button class="pop-sync"></button> <button class="pop-delete"></button> </div> 

我的dynamicJavaScript:

 $(document).on("click", "#project-list li" , function(){ var username = $.cookie("username"); var projectName = $(this).text() $("li.active").removeClass("active"); $(this).addClass("active"); console.log("username: " +username + " project name: "+projectName ); }); $(document).on("click", "button[rel=popover]", function(){ $(this).popover({ placement : 'right', container : 'body', html : true, content: function() { return $('#popover-content').html(); } }).click(function(e){ e.preventDefault(); }) }); //for close other popover when one popover button click $(document).on("click", "button[rel=popover]" , function(){ $("button[rel=popover]").not(this).popover('hide'); }); 

我已经搜查了类似的问题,但我仍然找不到解决我的问题的人。 如果有人有一些想法,请让我知道。 感谢您的帮助。

更新

如果你的popover将有一个一致的select器,那么你可以利用popover构造函数的selector属性。

 var popOverSettings = { placement: 'bottom', container: 'body', html: true, selector: '[rel="popover"]', //Sepcify the selector here content: function () { return $('#popover-content').html(); } } $('body').popover(popOverSettings); 

演示

其他方法:

  1. 标准方式 )再次将popup窗口绑定到正在插入的新项目。 将popoversettings保存在外部variables中。
  2. 使用Mutation Event / Mutation Observer来确定一个特定元素是否已经插入到ul或一个元素上。

资源

 var popOverSettings = { //Save the setting for later use as well placement: 'bottom', container: 'body', html: true, //content:" <div style='color:red'>This is your div content</div>" content: function () { return $('#popover-content').html(); } } $('ul').on('DOMNodeInserted', function () { //listed for new items inserted onto ul $(event.target).popover(popOverSettings); }); $("button[rel=popover]").popover(popOverSettings); $('.pop-Add').click(function () { $('ul').append("<li class='project-name'> <a>project name 2 <button class='pop-function' rel='popover'></button> </a> </li>"); }); 

但是不build议使用DOMNodeInserted Mutation Event来解决性能问题和支持。 这也被弃用了。 所以你最好的select是保存设置,并在你用新元素更新后进行绑定。

演示

另一个推荐的方法是根据MDN使用MutationObserver而不是MutationEvent,但是在某些浏览器中的支持是未知的,并且性能是一个问题。

 MutationObserver = window.MutationObserver || window.WebKitMutationObserver; // create an observer instance var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { $(mutation.addedNodes).popover(popOverSettings); }); }); // configuration of the observer: var config = { attributes: true, childList: true, characterData: true }; // pass in the target node, as well as the observer options observer.observe($('ul')[0], config); 

演示

可能太晚,但这是另一种select:

  $('body').popover({ selector: '[rel=popover]', trigger: 'hover', html: true, content: function () { return $(this).parents('.row').first().find('.metaContainer').html(); } }); 

我做到了这一点,它适用于我。 “content”是placesContent对象。 不是html的内容!

 var placesContent = $('#placescontent'); $('#places').popover({ trigger: "click", placement: "bottom", container: 'body', html : true, content : placesContent, }); $('#places').on('shown.bs.popover', function(){ $('#addPlaceBtn').on('click', addPlace); } 
 <div id="placescontent"><div id="addPlaceBtn">Add</div></div>