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

Question

我需要你的帮助。我目前正在 JavaScript 中使用模态库来为我的客户显示模态：

https://github.com/vodkabears/Remodal/tree/1.1.1

不幸的是，我的事件处理在用户单击按钮时无法按预期工作。当您查看手册时，您可以在点 Events 下看到以下事件处理程序：

$(document).on('cancellation', '.remodal', function () {
  console.log('Cancel button is clicked');
});

例如，当按下取消按钮时会触发此事件。因为我对多个事物使用一个弹出窗口，所以我需要将事件处理程序直接附加到调用。所以首先我写了一个打开弹出窗口的函数：

function openRemodal( remodalId ) {
    let remodal = $( `[data-remodal-id=${remodalId}]` );

    remodal.remodal().open();

    return remodal; // <- added to handle events
}

我可以这样调用这个函数：

openRemodal( 'information-remodal' );

为了完成事件处理，我现在在函数中返回了重模态并重写了我的调用：

openRemodal( 'information-remodal' ).on( 'cancellation', function () {
    alert( 'Test' );
} );

这似乎可行，但不知何故，当我重复打开弹出窗口并按下按钮时，任何新的打开都会增加多次显示警报。

我不确定为什么会发生这种情况以及原因。你能帮我解决这个问题吗？我只想调用其中的任何函数一次 - 任何时候。

Answer 1

JQuery 有一个 .one 方法...尝试用它代替 .on。回调应该运行只有一次。 https://api.jquery.com/one/

Answer 2

每次打开模型时都会将函数附加到取消事件。所以添加新功能，你永远不会删除它。第一次你有一个，然后你有两个...等等

只需附加一次，或在处理事件后将其移除。

const modal = openRemodal( 'information-remodal' )
const handler = () => {
    alert( 'Test' );
    modal.off('cancellation', handler);
}

modal.on( 'cancellation', handler);

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

JavaScript event handling code get's called multiple times

javascript

jquery

event-handling

jquery-events