Как привязать загрузчик popover к динамическим элементам

Я использую всплывающее окно 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');
 });

Я искал похожие проблемы, но все еще не могу найти ту, которая решит мою проблему. Если у кого-то есть идеи, пожалуйста, дайте мне знать. Спасибо за вашу помощь.

Ответы на вопрос(4)

Ваш ответ на вопрос