WooCommerce 結帳頁 JavaScript 重複觸發

需求是我要在結帳頁的付款方式中,多加入一個按鈕來更換已儲存的信用卡卡號,由於付款方式是透過 WooCommerce 的 Ajax 動態產生出來的,因此我要確保在付款方式都載入後才去綁定更換卡號按鈕的點擊事件,在 WooCommerce 使用的是 updated_checkout 事件。

$(document.body).on('updated_checkout', function () {
	$('.card-change').on('click', function (event) {
		event.preventDefault();
		alert('aaa');
	})
});

結果不知道為什麼,當點擊一次更換卡號按鈕卻會出現兩次重複的動作,假設我想要點擊按鈕會跳出 alert 警示,這個 alert 會出現兩次。原因出在 updated_checkout 事件在結帳頁載入時會觸發兩次,因此更換卡號按鈕的點擊事件綁定了兩次,造成重複動作的出現。

解決辦法是不要把點擊事件放在 updated_checkout 裡面,而是改用 jQuery 的動態綁定方法去做點擊事件的綁定,這樣就可以確保事件綁定不受 updated_checkout 的觸發次數所影響,完整程式碼如下:

$(document.body).on('click','.card-change', function (e) {
	e.preventDefault();
	alert('aaa');
	// 更換卡號要執行的 Ajax
});

目錄

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

Picture of 賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2024 想點創意科技有限公司

想點創意科技有限公司 | 統一編號 90516823
Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!