I&#39;m using Twitter Bootstrap&#39;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.  

this is my JavaScript for non-dynamic list

    $(&quot;button[rel=popover]&quot;).popover({ 
        placement : &#39;right&#39;,
    	container : &#39;body&#39;,
    	html : true,
    	//content:&quot; &lt;div style=&#39;color:red&#39;&gt;This is your div content&lt;/div&gt;&quot;
        content: function() {
          return $(&#39;#popover-content&#39;).html();
        }
    
        })
        .click(function(e) {
            e.preventDefault();
    });

However, It doesn&#39;t work well on dynamic list. It can show up when I click the button &quot;twice&quot; and only show up one of list items I click fist time. 

MY html: 
   

     &lt;ul id=&quot;project-list&quot; class=&quot;nav nav-list&quot;&gt;
       &lt;li class=&#39;project-name&#39;&gt;
         &lt;a &gt;project name 1
             &lt;button class=&quot;pop-function&quot; rel=&quot;popover&quot; &gt;&lt;/button&gt;
         &lt;/a&gt;
       &lt;/li&gt;
       &lt;li class=&#39;project-name&#39;&gt;
         &lt;a&gt;project name 2
            &lt;button class=&quot;pop-function&quot; rel=&quot;popover&quot; &gt;&lt;/button&gt;
         &lt;/a&gt;
       &lt;/li&gt;
                            
     &lt;/ul&gt;
        
    &lt;div id=&quot;popover-content&quot; style=&quot;display:none&quot;&gt;
        &lt;button class=&quot;pop-sync&quot;&gt;&lt;/button&gt;
        &lt;button class=&quot;pop-delete&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;

My JavaScript for dynamic:

    $(document).on(&quot;click&quot;, &quot;#project-list li&quot; , function(){
       var username = $.cookie(&quot;username&quot;);
       var projectName = $(this).text()
       $(&quot;li.active&quot;).removeClass(&quot;active&quot;);
       $(this).addClass(&quot;active&quot;);
       console.log(&quot;username: &quot; +username + &quot; project name: &quot;+projectName );
    });
    
    
    $(document).on(&quot;click&quot;, &quot;button[rel=popover]&quot;, function(){
    	$(this).popover({ 
    	   placement : &#39;right&#39;,
    	   container : &#39;body&#39;,
    	   html : true,
    	content: function() {
    	   return $(&#39;#popover-content&#39;).html();
        	}
    
        }).click(function(e){
    	e.preventDefault();
        })
    	
    });
    
    
    //for close other popover when one popover button click
    $(document).on(&quot;click&quot;, &quot;button[rel=popover]&quot; , function(){
    
            $(&quot;button[rel=popover]&quot;).not(this).popover(&#39;hide&#39;);
     });

I have searched similar problems, but I still can&#39;t find the one to solve my problem.  If anyone has some ideas, please let me know. Thanks your help. 

All Bootstrap Popover Solutions on Gang of Coders

Total of 1 Bootstrap Popover Solutions

How to bind bootstrap popover on dynamic elements