如何在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);
演示
其他方法：
- （ 标准方式 ）再次将popup窗口绑定到正在插入的新项目。 将popoversettings保存在外部variables中。
- 使用
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>
