Question

我有一个模态，我显示它以供确认：

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

知道为什么会这样吗？

谢谢。

Answer 1

每次调用 confirm 时，都会向 btnCancel 和 btnOk 中的每一个添加一个事件处理程序。

但是，您只能在点击那个按钮时删除其中一个按钮上的效果处理程序。

因此，如果您调用 confirm，然后单击 btnCancel，然后调用 confirm，您将在 btnOK 上拥有两个事件处理程序：一个从第一次调用 confirm 和第二次调用一次。

当点击任一按钮时，您需要删除两个事件处理程序。

...或者只是在文档加载时添加事件处理程序，之后不要触摸它们。

Javascript/JQuery 回调混淆

1 个答案: