亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

JavaScript one() 事件處理鏈導致奇怪的錯誤

JavaScript one() 事件處理鏈導致奇怪的錯誤

白板的微信 2023-07-14 09:52:25
我需要你的幫助。我目前正在編寫一些代碼來處理模式行為,例如單擊按鈕。為了一次捕獲多個事件,我已經發布了這個問題: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/[email protected]/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 回答

?
猛跑小豬

TA貢獻1858條經驗 獲得超8個贊

問題是因為每次單擊“打開”按鈕時都會重新綁定事件。要解決此問題,只需在頁面加載時定義模式和事件一次,然后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/[email protected]/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>


查看完整回答
反對 回復 2023-07-14
  • 1 回答
  • 0 關注
  • 142 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號