【PR】を含みます。

フロントエンド

【jQuery】動的に追加した要素にクリックイベントが発火しない原因と対処方法

jQuery 動的に追加した要素にクリックイベントが発火しない原因と対処方法

フロントエンドの業務でjQueryで動的に追加した要素にクリックイベントが発火しないという問題に直面することが時々あります。

本記事では、クリックイベントが発火しない原因と対処方法について解説します。

クリックイベントが発火しないサンプルコード

以下のコードは、body要素の先頭に動的にbutton要素を追加し、クリックイベントを設定しています。

動的に追加したボタンをクリックすると、「ボタンがクリックされました！」というアラートが表示されるはずですが、クリックイベントが発火しません。

HTML
Copy
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>【jQuery】クリックイベント</title>
  7. </head>
  8. <body>
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  10.     <script>
  11.       $('#myButton').on('click', function() {
  12.         alert('ボタンがクリックされました！');
  13.       });
  15.       // 動的に追加するボタン要素
  16.       let button = '<button id="myButton">クリック</button>';
  18.       // ボタンを body の先頭に追加
  19.       $(button).prependTo($('body'));
  20.     </script>
  21. </body>
  22. </html>

クリックイベントが発火しない原因

jQueryで動的に追加された要素に対して直接クリックイベントを設定しても、クリックイベントは新しい要素に適用されません。

これは、jQueryがクリックイベントを設定する際に、その時点で存在する要素に対してのみ行うためです。

クリックイベントが発火しないときの対処方法

クリックイベントが発火しない例で記載している、$('#myButton').on('click', function() {部分を$(document).on('click', '#myButton', function() {と書き換えることで、jQueryで動的に追加した要素にクリックイベントを設定できます。

HTML
Copy
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>【jQuery】クリックイベント</title>
  7. </head>
  8. <body>
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  10.     <script>
  11.       $(document).on('click', '#myButton', function() {
  12.         alert('ボタンがクリックされました！');
  13.       });
  15.       // 動的に追加するボタン要素
  16.       let button = '<button id="myButton">クリック</button>';
  18.       // ボタンを body の先頭に追加
  19.       $(button).prependTo($('body'));
  20.     </script>
  21. </body>
  22. </html>

documentとは？

documentは、HTMLドキュメント全体を指すオブジェクトです。

具体的には、documentオブジェクトはウェブページのDOM（Document Object Model）ツリー全体を表しています。

$(document).on('click', '#myButton', function() {とすることで、HTMLドキュメント全体に対してクリックイベントリスナーを設定しています。

クリックイベントが発生したときに特定の要素（今回場合は、#myButton）にマッチするかどうかをチェックします。

documentオブジェクトを使用することで、ドキュメント全体に対してイベントリスナーを設定できるため、ページ内のどの要素に対しても柔軟にイベントを処理できるようになります。

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-フロントエンド
-