4

したがって、次の JavaScript コードがあります。ユーザーがページ上のボタンをクリックすると、データ属性から「name」と「stepId」が読み取られ、Twitter ブートストラップ モーダル ダイアログが開きます。ダイアログで [クリア] ボタンをクリックすると、提供されたコールバックが起動されます。

これは、初めて呼び出されたときにうまく機能します。問題は、その後のすべての呼び出しで、[クリア] ボタンをクリックすると、コールバックが 2 回発生することです。最初のコールバックではstepId、最初の呼び出しからの が表示され、2 番目のコールバックでは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 を次のコードに変更すると、常に 1 つのコールバックが取得されますが、最初の呼び出しからの stepId が常に表示されます。

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

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

1 に答える 1

-1

クリック関数内にイベント停止伝播を追加し、return false を追加してみてください。これにより、イベントの伝播または二重呼び出しが停止します。また、off().on()... を使用するのではなく、.live() だけを試してから、ユーザーがクリックを使用できないときにクリックイベントを削除する準備ができたら、off() を使用します。 、メモリから削除します。 

$(dlgId + " .okButton").live('click', function (event) {
  event.stopImmediatePropagation(); 
  event = null;
  onOK(true);
  hide();
  return false;
});
于 2013-08-20T15:28:16.857 に答える