我在动态列表中使用 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');
});
我已经搜索了类似的问题,但我仍然找不到解决我的问题的问题。如果有人有一些想法,请告诉我。谢谢你的帮助。