【jQuery】動的に追加した要素を取得する方法：on()メソッドの利用

2022.07.29 / 2022.07.29

本記事ではjQueryによる、動的に追加した要素を取得する方法について解説していきます。

多くのWebアプリケーションではjQueryを使って動的に要素を追加することが多いです。しかしこの追加した要素をjQueryで取得できない問題が発生することがあります。

例えば動的に追加したinput要素から、入力された値を取得しようとしても取得できないことがあります。

本記事を通して、動的に追加した要素をjQueryで取得する方法について理解を深めてください。ここではon()メソッドを利用して解説していきます。

jQueryで発生した問題

あるWebアプリケーションを作成している際にボタンを押下するとinput要素の入力フィールドが追加される仕組みをjQueryで作成しました。ここではCSSフレームワークのBootstrapを利用して、ボタンやinput要素のデザインを行っています。

<!-- HTML -->
<div id="box-input">
    <div class="input-group input-group-sm">
        <span class="input-group-text" id="programming">言語</span>
        <input type="text" class="form-control input-programming" value="" name="programming">
    </div>
    <div class="input-group input-group-sm">
        <span class="input-group-text" id="programming">言語</span>
        <input type="text" class="form-control input-programming" value="" name="programming">
    </div>
</div>
<button type="submit" class="btn btn-primary btn-sm" id="button-programming" >Add</button>

<!— jQuery -->
<script>
    $(function(){
        $('#button-programming').on("click", function(){
            var add_contents = '<div class="input-group input-group-sm">'
                add_contents += '<span class="input-group-text" id="programming">言語</span>'
                add_contents += '<input type="text" class="form-control input-programming" value="" name="programming"> '
                add_contents += '</div>'
            $('#box-input').append(add_contents)
        });
    });
</script>

上記のコードでボタンをクリックすると記入欄が一つ追加されるようになりました。

ボタンがクリックされたときの検出にはjQueryのon()メソッドを使用しています。on()メソッドの詳しい使用方法については以下記事をご参照ください。

次にinput要素に入力された値を取得するjQueryを以下のように追加しました。

$('.input-programming').on("focusout", function(){
    var programming = $(this).val();
    console.log(programming)
});

しかしここで問題が発生しました。初めから表示されていたinput要素の入力フィールドからは値を取得できるのですが、ボタンを押下後に動的に追加されたinput要素からは値を取得することができませんでした。

動的に追加した要素を取得できない問題の解決方法

この問題の解決方法はとても簡単です。

要素を取得するためのjQueryの起点をdocumentに変えることです。

documentでなくてもbodyなど親要素であれば問題ないです。

起点をdocumentなど親要素に変えるだけでこの問題が解決されます。問題があったコードの起点を変更して記述すると以下のようになります。

$(document).on("focusout", '.input-programming', function(){
    var programming = $(this).val();
    console.log(programming);
});

これだけで動的に追加した要素も取得できるようになります。

注意

要素を特定するためのCSSセレクタがidで指定している場合はうまくいかないです。Id以外のclassなどで指定するようにしましょう

まとめ

本記事「【jQuery】動的に追加した要素を取得する方法：on()メソッドの利用」はいかがでしたか。

動的に追加した要素を取得する場合は、起点をdocumentなど親要素にすることを基本とすることをお勧めします。