jQueryのonに名前空間をつけてみる

jQueryのonの第一引数にはclickなどのイベントを指定しますが、以下のようにclickに続けて名前空間をつけることができます。

$(document).on('click.hoge', '#button-1', () => console.log('button1'));

この名前空間の活用方法としては、off を使う際に役立ちます。

例えば以下のようなコードにした場合、button-1とbutton-3にのみoffが適用されます。button-2はoffが適用されないので、コンソールログが出力されます。

<button id="button-1">button1</button>
<button id="button-2">button2</button>
<button id="button-3">button3</button>
$(function(){
  $(document).on('click.hoge', '#button-1', () => console.log('button1'));
  $(document).on('click', '#button-2', () => console.log('button2'));
  $(document).on('click.hoge', '#button-3', () => console.log('button3'));
  $(document).off('.hoge');
});
// button-2 を押したときだけ、コンソールログが出力されます。