以下の JS コードは、通常のページ読み込みで読み込まれると正常に動作します。ただし、このコードを含むページが Ajax を介して更新された場合、click
は複数回 (Ajax を介してページが更新されるたびに 1 つずつ) 登録されます。これは、「Saved」という単語が表示された回数か、console.log
「#SavedBtn clicked」というメッセージが表示された回数でわかります。
ページがAjax経由でロードされたときにクリックハンドラを設定解除する方法はありますか?
HTML:
<button type='button' id='saveBtn'></button>
JS:
$(document.body).on('click', '#saveBtn', function(){
var t='<span class="savedSpan">Saved</span>';
$(this).after(t);
console.log('#saveBtn clicked');
$('.savedSpan').animate({
color: "#FFF4D2"
}, 1000).fadeOut();
});