動的に後から追加したDOM要素にイベントを設定する(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>
$(function() { // この時点で生成されているコントロールにはイベントが設定される $('input').on('input', function() { console.log(this.value); }); // ここで追加したコントロールにはイベントが設定されない $('#container').after('<input type="text" id="fuga-text">'); });
うまくいくソースコード
HTML駄目なソースコードの時と同じです。
$(function() { // ドキュメント上すべてのinput要素に対して // inputイベントを設定する // onの第1引数にイベント名を // 第2引数に設定対象のid等を記述する $(document).on('input', 'input', function() { console.log(this.value); }); // ここで追加したコントロールにもイベントが設定される $('#container').after('<input type="text" id="fuga-text">'); });