JavaScript one() 事件处理链导致奇怪的错误

Question

我需要你的帮助。我目前正在编写一些代码来处理模式行为，例如单击按钮。为了一次捕获多个事件，我已经发布了这个问题：

JavaScript 事件处理代码被多次调用

那里说使用 jQuery.one()函数在打开弹出窗口并多次单击一个按钮时仅捕获一次单击。这对于一个按钮来说效果很好，但是当我使用两个按钮时，我又出现了另一个错误。

首先，我更改了事件处理以接受多个事件：

jQuery(document).ready(function($) {

    $('button').click(function() {

        openConfirmationRemodal().one({

            confirmation: function() {

                console.log('Confirmation');

            },

            cancellation: function() {

                console.log('Cancellation');

            }

        });

    });

});

当我单击按钮时，我的弹出窗口将打开并显示两个按钮：

当我现在单击该Nein按钮时，弹出窗口将关闭并且控制台会记录Cancellation。当我现在再次打开弹出窗口并单击Ja按钮时，确认会被记录两次。我真的不明白这个以及如何解决这个问题..

如果我以相反的方式执行此操作，错误是相同的，但顺序不同：

这里有一个工作示例。不知何故，示例中的操作被触发两次（最初）。这与我的浏览器中的正常进度不同，但我认为这取决于代码片段功能：

jQuery(document).ready(function($) {

  $('button').click(function() {

    openConfirmationRemodal().one({

      confirmation: function() {

        console.log('Confirmation');

      },

      cancellation: function() {

        console.log('Cancellation');

      }

    });

  });

});

function openConfirmationRemodal() {

  let remodal = $(`[data-remodal-id=test]`);

  remodal.remodal().open();

  return remodal;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/remodal@1.1.1/src/remodal.js"></script>

<button>Open Pop-Up</button>

<div class="remodal" data-remodal-id="test">

  <button data-remodal-action="close" class="remodal-close"></button>

  <h1>Remodal</h1>

  <p>

    Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.

  </p>

  <br>

  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>

  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>

</div>

Answer 1

问题是因为每次单击“打开”按钮时都会重新绑定事件。要解决此问题，只需在页面加载时定义模式和事件一次，然后open()在单击按钮时调用模式。尝试这个：let $remodal = $(`[data-remodal-id=test]`);let modal = $remodal.remodal();$remodal.on({&nbsp; confirmation: function() {&nbsp; &nbsp; console.log('Confirmation');&nbsp; },&nbsp; cancellation: function() {&nbsp; &nbsp; console.log('Cancellation');&nbsp; }});jQuery($ => {&nbsp; $('button').click(function() {&nbsp; &nbsp; modal.open();&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/remodal@1.1.1/src/remodal.js"></script><button>Open Pop-Up</button><div class="remodal" data-remodal-id="test">&nbsp; <button data-remodal-action="close" class="remodal-close"></button>&nbsp; <h1>Remodal</h1>&nbsp; <p>&nbsp; &nbsp; Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.&nbsp; </p>&nbsp; <br>&nbsp; <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>&nbsp; <button data-remodal-action="confirm" class="remodal-confirm">OK</button></div>