Javascript 为什么要调用此回调处理程序两次？

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

这在第一次调用它时效果很好。问题在于，在所有后续调用中，当单击“清除”按钮时，会触发两次回调。在第一次回调中，我们看到来自第一次调用的

stepId

，在第二次回调中，我们看到来自当前调用的

stepId

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

      $(dlgId + " .okButton").off('click');
   });
};

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

---

尝试在单击函数中添加事件停止传播，以及添加返回false。这将停止任何事件传播或双重调用。此外，与其使用off（）.on（）。。。请尝试just.live（），然后在准备删除用户不可用的单击事件时使用off（），并将其从内存中删除

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

---

为什么要多次执行

jQuery.noConflict（）

？您是否忘记在

init

中执行此操作？似乎是问题的根源……老实说，我对jQuery.noConflict的功能了解不多。我只知道我在启动boostrap模式之前遇到了问题，而我得到的解决方案是首先调用这个函数。我只需要打一次电话吗？@elclanrs嗯，原来那是我的问题。我将jQuery.noConflict放在Dialog.init的click处理程序前面，并将其从其他位置删除，现在它可以正常工作了。如果你想给我一个答案，我会接受的。它可能暂时有效。。。通常，您只需调用一次并将其分配给一个变量并使用它，或者只需调用

noConflict

，然后使用

document.ready

函数并将

$

作为参数传递。我想你只是想太快地抽象太多。我建议你先用功能性的方法一步一步地解决这个问题，然后在一切正常的情况下抽象选择器和事件。嗯，我就是这么做的。我让它在一个简单但丑陋的功能布局中正常工作，但由于我有大约40个不同的对话框，我想把它抽象出来，使它更干净，但无法找出为什么会发生这个错误。我想我不应该在不知道noConflict实际功能的情况下使用它。我现在就去查。