提问者:小点点

JavaScript/jQuery回调混乱


我给出了一个模型以供确认:

<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>

下面是显示上述模式的代码。

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,它显示模态。但是如果我单击Cancel,然后再次调用confirm(确认),这一次,我点击OK:函数(上面代码段中的第二个参数)被调用两次。如果我点击取消10次,上面的函数调用10次。

知道为什么会这样吗?

谢谢.


共1个答案

匿名用户

每次调用confirm时,都将一个事件处理程序添加到btncancelbtnok中。

但是,您只在单击其中一个按钮时删除该按钮上的效果处理程序。

因此,如果调用confirm,然后单击btncancel,然后调用confirm您将在btnok上有两个事件处理程序:一个来自对confirm的第一次调用,一个来自第二次调用。

单击任何一个按钮时,都需要删除这两个事件处理程序。

…或者只在加载文档时添加事件处理程序,之后不要再碰它们。