[英]Bootstrap 3.1.1 Popover Delegated OK Function
我有一个表,最后一列有一个动态生成的按钮。
<button id="popover-row' + row + '" rel="popover">' + docAccessText + ' ' + fileAccessText + '</Button>;
单击上方的按钮,我将创建一个动态Popover。
// initialize the Popover
var popOverSettings = {
placement: 'bottom',
container: 'body',
html: true,
selector: '[rel="popover"]',
content: $('#permissionPopover').html()
}
// bind the popover on body
$("body").popover(popOverSettings).parent().delegate('button.btn_permission_ok', 'click', function(event) {
// Do something on click of OK
$("[rel=popover]").popover("destroy");
$(".popover").remove();
}
}).on("show.bs.popover", function(e) {
// hide all other popovers before showing the current popover
$("[rel=popover]").not(e.target).popover("destroy");
$(".popover").remove();
}).on("shown.bs.popover", function(e) {
// Do something after showing the popover
});
// click on cancel button removes the popover
$("body").popover(popOverSettings).parent().delegate('div.btn_permission_cancel', 'click', function() {
$("[rel=popover]").popover("destroy");
$(".popover").remove();
});
一切都按预期进行,但只有第一次。 当我再次打开该视图时,事情开始重复。 弹出功能开始执行两次。 如果再次关闭该视图,则弹出功能开始执行三次。
我相信,当我在“单击确定的OK”上销毁PopOver时,这些事件仍然存在。 我尝试了下面的代码行来取消删除事件,但是它不起作用。
$(event.target).parent().undelegate('button.btn_permission_ok', 'click');
请提出建议。
这不是一个完整的答案,但是如果您希望每个按钮触发一个弹出按钮,请尝试使用类似以下的代码。
var popOverSettings = {
trigger: 'manual',
placement: 'bottom',
container: 'body',
html: true,
content: $('#permissionPopover').html()
};
$(document).on("click", "button[rel='popover']", function(e) {
var $btn = $(this);
$btn.popover(popoverOptions);
$btn.popover("show");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.