Question

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

第一次调用它时效果很好。问题是在所有后续调用中，单击“清除”按钮时，回调将被触发两次。在第一个回调中，我们看到第一次调用的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;
});

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

1 个答案: