[jQuery] on() で後から追加した要素にもイベントを定義したい

jQueryで後から追加された要素にもイベントを発火したい

jQueryで “$(‘button’).on(‘click’, function() { … });” みたいな感じで、たとえばボタンクリックのイベントを定義したとします。この定義時点で存在していたボタンにはクリック時の処理が追加されますが、あとからJavascriptなどで動的に追加したボタンがあった場合にはこれが効きません。

具体例として以下の場合を考えます。

HTML

<div class="buttons-area">
    <button>最初のボタン</button>
</div>

Javascript

$('button').on('click', function() {
    // 後から追加されたボタンには効かないイベント
    $('.buttons-area').append('<button>追加されたボタン</button>');
});

“最初のボタン” がクリックされたら、”追加されたボタン” がどんどんできていくわけですが、buttonに対して定義したイベントは追加されません。後から追加したボタンにも最初に設定したイベントを反映させたいというのが今回の目的です。

親要素に対してイベントを設定する

ボタンそのものについてイベントを設定すると、その時点で存在しない要素については反映されないことが確認できました。対応としては、「親要素についてイベントを設定」を行います。

上記例でいうと “button” ではなく、”buttons-area” に対してクリックイベントを定義します。これでボタンのクリックイベントを拾うことができます。

これはイベントの バブリング と呼ばれるもので、ある要素で発生したイベントが親要素へとどんどん伝達していきます。したがってボタンのクリック時には、ボタンの親であるdivにもクリックイベントが走ります。このバブリングで伝達してきたイベントでボタンセレクタに対してのイベントのみを拾うようにします。

HTML

<div class="buttons-area">
    <button>最初のボタン</button>
</div>

Javascript

$('.buttons-area').on('click', 'button', function() {
    $('.buttons-area').append('<button>複製されたボタン</button>');
});

上記のように .button-area に対してのイベントを on() で設定し、バブリングの発生源のセレクタを引数で指定します。こうすることで “button” からあがってきたイベントを拾うことができます。

したがってあとから追加されたボタンでもうまく動くという次第です。

参考URL

• .on() | jQuery API Documentation

以上です。