No.519

append() した要素のイベントが発火しないとお嘆きの貴方へ

　ほんとうによく見かけるバグで、Javascriptで動的に追加した要素のイベントが発火しないというものがある。

　そりゃそうだ。イベント設定はだいたい画面描画時に行っているのだから、その時に画面に存在していなかった要素にイベントが設定されるわけがない。

　というわけで、イベント追加方法と注意事項をメモ。
　どちらかというと注意事項の方が大事かも。

イベント設定方法

　要素の追加後に on() メソッドでイベント設定すればよい。

$('親セレクタ').on('イベント', '子セレクタ', function() {
  イベント内容
});

もしくは

$('セレクタ').on('イベント', function() {
  イベント内容
});

注意事項

　on() を繰り返し実行していると、イベントが重複して設定され、とんでも無い数のイベントが画面に設定されるという事件が起きる。

　防止には、on() メソッド実行前に off() メソッドを実行してイベントを一回削除してしまうのが簡単。

$('セレクタ').off('イベント');