ゆるふわエンジニアのブログ

行ったこと、調べたこと等をつらつらと書いていくかもしれません。

動的に後から追加したDOM要素にイベントを設定する(jQuery)

JavaScript jQuery

本記事では、動的に後から追加したDOM要素に
イベントを設定する方法を紹介します。

本記事の内容です。

何がしたいのか？

動的に後から追加したDOM要素にも動的にイベントを設定したい。
今回は、hoge-textの後ろに動的にfuga-textを追加し、
hoge-textとfuga-textに対し、同じイベントを設定してみます。

駄目なソースコード

HTML

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/index.js"></script>
    </head>
    <body>
        <div id="container">
            <input type="text" id="hoge-text">
        </div>
    </body>
</html>

JavaScript

$(function() {
    // この時点で生成されているコントロールにはイベントが設定される
    $('input').on('input', function() {
        console.log(this.value);
    });

    // ここで追加したコントロールにはイベントが設定されない
    $('#container').after('<input type="text" id="fuga-text">');
});

うまくいくソースコード

HTML
駄目なソースコードの時と同じです。

JavaScript

$(function() {
    // ドキュメント上すべてのinput要素に対して
    // inputイベントを設定する
    // onの第1引数にイベント名を
    // 第2引数に設定対象のid等を記述する
    $(document).on('input', 'input', function() {
        console.log(this.value);
    });

    // ここで追加したコントロールにもイベントが設定される
    $('#container').after('<input type="text" id="fuga-text">');
});