如何在动态元素上绑定引导弹出窗口

Question

我正在动态列表上使用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');
 });

我已经搜索过类似的问题，但是仍然找不到解决我的问题的方法。如果有人有什么想法，请告诉我。感谢您的帮助。

Answer 1

更新资料

如果您的弹出框的选择器是一致的，则可以使用selectorpopover构造函数的属性。

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. （ 标准方式 ）再次将弹出框绑定到要插入的新项目。将popoversettings保存在一个外部变量中。
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>");
});

但是不建议将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);