JavaScript one() 事件处理链导致奇怪的错误
我需要你的帮助。我目前正在编写一些代码来处理模式行为，例如单击按钮。为了一次捕获多个事件，我已经发布了这个问题：
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>
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>00
相关分类