jQuery の on は重複してイベントが登録される

以下のようなコードを書いた場合に、ボタンを押すとコンソールには hoge と foo が出力されます。
<button id="my-btn">button</button>
$(function(){
$(document).on('click', '#my-btn', () => console.log('hoge'));
$(document).on('click', '#my-btn', () => console.log('foo'));
});
jQuery の on は上書きではなく、追加する動作になるためです。
追加されるのを防ぎたい場合は、off を利用します。
$(function(){
$(document).on('click', '#my-btn', () => console.log('hoge'));
$(document).off('click', '#my-btn');
$(document).on('click', '#my-btn', () => console.log('foo'));
});
// foo のみが出力される
最近のコメント