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 のみが出力される

JavaScript, プログラミング入門

Posted by たみぼうず