【.on()のすすめ】DOM生成した要素に対してクリックなどのイベントを実行する方法Web2018年3月21日jQueryでクリックイベントによる処理を行う際、click(function(){~の書式で実装することがよくあると思いますが、これがDOM生成した要素の場合うまく処理が効かないことがあります。そんな時、.on()メソッドを使うことで大体解決できますので、本記事ではこの.on()メソッドの使い方についてご紹介させていただきたいと思います。});});※jQueryを読み込んでいる場合のスクリプトとなります解説DOM生成した要素にイベントが実行できないパターン.click()は、ページ読み込み時に存在する要素にイベントを付与します。ページ読み込み後、クリック等何かしらのアクションにより動的に生成された要素には有効ではありません。a')」をクリックしてもアラートは表示されない、ということです。falseも機能しません。DOM生成した要素にイベントが実行できるパターンそこで、.on()メソッドの出番です。これを利用することで、ページ読み込み後に動的に追加された要素にもイベントが付与されます。.on()メソッドの第一引数にイベント名、第二引数にセレクタを指定することで動作します。a」をセレクタ指定しています。DOM生成した要素にイベントが実行できるパターン(第二引数を省略).on()メソッドを使っている点は同じですが、こちらは第二引数を省略しかつセレクタに対して.on()を当てる方法です。これにより、対象の要素のみにイベントハンドラを追加することが可能です。a').click(~」内に記述することで、DOM生成した要素にもイベントを付与しています。デモ実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。DOM生成した要素に対してクリックなどのイベントを実行する方法まとめ昔のjQueryだとlive()とか使ってDOM生成した要素を弄んだ気がするんですが、今は.on()が汎用的に使えるのでとても便利ですね。セレクタが合っているのにDOM要素を操作できない場合は、.on()メソッドを試してみてください。大体のパターンはこれで解決すると思います。ご参考になれば幸いです。ため、即時には反映されません。住宅ローン2019年5月7日さらに見る記事を書いている人フォローするRSSを購読するWebデザイナー/フロントエンド・エンジニアのMasaです。独学でWebデザインを勉強後Web業界へ就職し、今の会社に勤めて12年目になりました。2016年4月にマイホームを購入し、休日は芝生いじりと育児に励んでいます。