Como ligar o popover bootstrap em elementos dinâmicos
Estou usando o popover do Twitter Bootstrap na lista dinâmica. O item da lista tem um botão, quando eu clico no botão, ele deve aparecer popover. Ele funciona bem quando eu testei em não-dinâmico.
este é o meu JavaScript para lista não dinâmica
$("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();
});
No entanto, não funciona bem na lista dinâmica. Ele pode aparecer quando eu clico no botão "duas vezes" e só apareço em um dos itens da lista e clico no tempo do punho.
Meu 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>
Meu JavaScript para dinâmico:
$(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');
});
Eu tenho procurado problemas semelhantes, mas ainda não consigo encontrar o único para resolver o meu problema. Se alguém tiver algumas ideias, por favor me avise. Obrigado pela sua ajuda.