我正在动态列表上使用TwitterBootstrap的弹出窗口。列表项有一个按钮,当我单击该按钮时,它将显示弹出窗口。当我在非动态环境下进行测试时,它可以正常工作。
这是我的非动态列表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(); });
但是,它在动态列表上效果不佳。当我单击“两次”按钮时,它可以显示,并且仅显示我单击第一时间的列表项之一。
我的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>
我的动态JavaScript:
$(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'); });
我已经搜索过类似的问题,但是仍然找不到解决我的问题的方法。如果有人有什么想法,请告诉我。感谢您的帮助。
更新资料
如果您的弹出框的选择器是一致的,则可以使用selectorpopover构造函数的属性。
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);
其他方法:
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>"); });
但是不建议将DOMNodeInsertedEvent用于性能问题和支持。也已弃此方法。因此,最好的选择是保存设置并在使用新元素更新后绑定。
另一种推荐的方法是根据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);