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
});