我有一个模态,我显示它以供确认:
<div class="modal" tabindex="-1" role="dialog" id="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
... Body ...
<div class="modal-footer">
<button type="button" id="btnCancel" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="btnOk" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
这是显示上述 Modal 的代码..
var M = {
confirm: function(body, yes, no) {
$('#btnCancel').on('click', function() {
$('#btnCancel').off();
$('#confirm-modal').modal('hide');
if (no) {
return no();
}
});
$('#btnOk').on('click', function() {
$('#btnOk').off();
$('#modal').modal('hide');
if (yes) {
return yes();
}
});
}
}
这是我如何使用它...(例如,在任何视图中)
M.confirm("Body", function(){
// Function Body
})
现在,问题是:如果我调用confirm,它会显示Modal。但是,如果我单击“取消”并再次调用“确认”,这一次,我单击“确定”:该函数(上面代码段中的第二个参数)被调用两次。如果我点击取消 10 次,上面的函数将被调用 10 次。
知道为什么会这样吗?
谢谢。
答案 0 :(得分:1)
每次调用 confirm
时,都会向 btnCancel
和 btnOk
中的每一个添加一个事件处理程序。
但是,您只能在点击那个按钮时删除其中一个按钮上的效果处理程序。
因此,如果您调用 confirm
,然后单击 btnCancel
,然后调用 confirm
,您将在 btnOK
上拥有两个事件处理程序:一个从第一次调用 confirm
和第二次调用一次。
当点击任一按钮时,您需要删除两个事件处理程序。
...或者只是在文档加载时添加事件处理程序,之后不要触摸它们。