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

Why is this callback handler being called twice?

本文关键字:两次 调用 回调 处理 程序 为什么      更新时间:2023-09-26

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

这在第一次调用时效果很好。问题是,在所有后续调用中,单击">清除"按钮时,回调会触发两次。在第一次回调中,我们看到第一次调用的stepId,在第二次回调中,我们看到当前调用的stepId

clearInputTargetNameclearInputName 始终是对话框中的正确值。

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');
   });
};

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

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