title: How to bind bootstrap popover on dynamic elements
body: <p>I'm using Twitter Bootstrap's popover on the dynamic list. The list item has a button, when I click the button, it should show up popover. It works fine when I tested on non-dynamic.  </p>
  
  <p>this is my JavaScript for non-dynamic list</p>
  
  <pre><code>$("button[rel=popover]").popover({ 
      placement : 'right',
      container : 'body',
      html : true,
      //content:" &lt;div style='color:red'&gt;This is your div content&lt;/div&gt;"
      content: function() {
        return $('#popover-content').html();
      }
  
      })
      .click(function(e) {
          e.preventDefault();
  });
  </code></pre>
  
  <p>However, It doesn't work well on dynamic list. It can show up when I click the button "twice" and only show up one of list items I click fist time. </p>
  
  <p>MY html: </p>
  
  <pre><code> &lt;ul id="project-list" class="nav nav-list"&gt;
     &lt;li class='project-name'&gt;
       &lt;a &gt;project name 1
           &lt;button class="pop-function" rel="popover" &gt;&lt;/button&gt;
       &lt;/a&gt;
     &lt;/li&gt;
     &lt;li class='project-name'&gt;
       &lt;a&gt;project name 2
          &lt;button class="pop-function" rel="popover" &gt;&lt;/button&gt;
       &lt;/a&gt;
     &lt;/li&gt;
  
   &lt;/ul&gt;
  
  &lt;div id="popover-content" style="display:none"&gt;
      &lt;button class="pop-sync"&gt;&lt;/button&gt;
      &lt;button class="pop-delete"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My JavaScript for dynamic:</p>
  
  <pre><code>$(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');
   });
  </code></pre>
  
  <p>I have searched similar problems, but I still can't find the one to solve my problem.  If anyone has some ideas, please let me know. Thanks your help. </p>