javascript - 为什么这个回调处理程序被调用两次？

Question

我有以下 JavaScript 代码。当用户单击页面上的按钮时，它会从数据属性中读取“name”和“stepId”，然后打开一个 Twitter 引导模式对话框。当点击对话框上的 Clear 按钮时，它会触发提供的回调。

这在第一次调用时效果很好。问题是在所有后续调用中，当单击 Clear 按钮时，回调会被触发两次。在第一次回调中，我们看到了来自第一次调用的 stepId，在第二次回调中，我们看到了来自当前调用的 stepId。

clearInputTargetName 和 clearInputName 在对话框中始终是正确的值。

var Dialog = function (dlgId)
{
   var okCallback = null;

   var show = function (cb)
   {
      okCallback = cb;

      jQuery.noConflict();
      $(dlgId).modal("show");
   };

   var hide = function ()
   {
      jQuery.noConflict();
      $(dlgId).modal("hide");
   };

   var onOK = function ()
   {
      okCallback();
   };

   var init = function ()
   {
      $(dlgId + " .okButton").off('click').on('click', function ()
      {
         onOK(true);
         hide();
      });
   };

   init();
   
   return {
      show: show,
      hide: hide,
      init: init
   };
};

var ClearInputDialog = function ()
{
   var show = function (input, cb)
   {
      var dlg = new Dialog("#clearInputDialog", input);

      $("#clearInputTargetName").text(input);
      $("#clearInputName").text(input);

      dlg.show(function ()
      {
         cb(true);
         dlg.hide();
      });
   };

   return { show: show };
};

var WorkflowDesignerVM = function ()
{
   var clearInput = function ()
   {
      var name = $(this).attr("data-input");
      var stepId = $(this).attr("data-stepid");

      var dlg = new ClearInputDialog();
      dlg.show(name, function (result)
      {
         alert('clearing stepId: ' + stepId);
      });
   };

   var init = function ()
   {
      $(document).on("click", ".clear-input", clearInput);
   };
   
   init();
};

var vm = new WorkflowDesignerVM();

模态对话框如下所示:

<div id="clearInputDialog" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Clear Input for <span id="clearInputTargetName">[clearInputTargetName]</span></h4>
      </div>
      <div class="modal-body">
            Are you sure you want to clear <span id="clearInputName">[clearInputName]</span>?
        </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default cancelButton" data-dismiss="modal">Close</button>
        <button type="button" id="clearInputButton" class="btn btn-primary okButton" data-stepid="" data-input="">Clear</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我感觉它与我的 jQuery 事件处理程序代码有关。如果我将 Dialog.init 更改为以下代码，那么我们总是会得到一个回调，但我们总是会看到第一次调用的 stepId。

var init = function ()
{
   $(dlgId + " .okButton").on('click', function ()
   {
      onOK(true);
      hide();
          
      $(dlgId + " .okButton").off('click');
   });
};

Answer 1

尝试在您的点击函数中添加事件停止传播，以及添加 return false。这将停止任何事件传播或双重调用。此外，而不是使用 off().on()... 尝试只使用 .live() 然后，当您准备好在用户无法单击时删除单击事件时使用 off()，以及，将其从内存中删除。

$(dlgId + " .okButton").live('click', function (event) {
  event.stopImmediatePropagation(); 
  event = null;
  onOK(true);
  hide();
  return false;
});