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

  confirmation: function() {

    console.log('Confirmation');

  },

  cancellation: function() {

    console.log('Cancellation');

  }

});

jQuery($ => {

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

    modal.open();

  });

});

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