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

Question

我正在动态列表上使用Twitter Bootstrap的弹出窗口。列表项有一个按钮，当我单击该按钮时，它将显示弹出窗口。当我在非动态环境下进行测试时，它可以正常工作。

这是我的非动态列表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

可能为时已晚，但这是另一种选择：&nbsp;$('body').popover({&nbsp; &nbsp; selector: '[rel=popover]',&nbsp; &nbsp; trigger: 'hover',&nbsp; &nbsp; html: true,&nbsp; &nbsp; content: function () {&nbsp; &nbsp; &nbsp; &nbsp; return $(this).parents('.row').first().find('.metaContainer').html();&nbsp; &nbsp; }});