JavaScript

【jQuery】appendで追加した要素がクリックできない時の対処の仕方を2通り紹介

クリックする指

あなた
jQueryで、appendで追加した要素がクリックできません。

どうしたらいいでしょうか?

 

今回はこのような疑問に答えていきます。

 

前提:appendで追加した要素は通常クリックできません

 

前提としてお話します。

jQueryにおいて、appendなどで動的に追加した要素は、通常のやり方だとクリックできません。

つまり、以下のようなことをしようとしても失敗します。

 

const buttonDom = `<div class="more-read-button text-center">
                    <button id="more-read-button ">もっと見る</button>
                    </div>`;
$( ".message-button" ).append( buttonDom );

$( "#more-read-button" ).on( "click", function ()
    {
             console.log("クリックされたよ");  //このコードは動かない        
     });

そこでこの記事では、問題解決のための方法を2通り紹介していきます。

方法①:親要素にクリックイベントを設置する(dom操作で追加した子要素には設置しない)

 

まずは1つ目です。

jQueryでappendで追加した要素にクリックイベントを設置したい場合は、親要素に設置する方法で実現できます。

 

具体的なコードを紹介

 

このやり方のポイントは「読み込み時から存在する要素にクリックイベントをもたせる」ことです。

例えば、先程のコードの場合は、追加したボタンの要素の親要素のクラスは「message-button」です。

そちらにクリックイベントを設置しましょう。

コードは次のような感じです。

 

const buttonDom = `<div class="more-read-button text-center">
                    <button id="more-read-button ">もっと見る</button>
                    </div>`;
$( ".message-button" ).append( buttonDom );

$( ".message-button" ).on( "click", function ()
    {
             console.log("クリックされたよ");  //このコードは動く    
     });

 

こちらであれば、正常に動きます。

 

方法②:$( document ).onを使って第2引数に要素を渡す

 

2つ目の方法は「$( document ).on」を使うものです。

こちらの場合は、親要素を指定しなくても、追加したdom要素にクリックイベントを設置できます。

 

コードで解説

 

実際のコードは次のようになります。

 

const buttonDom = `<div class="more-read-button text-center">
                    <button id="more-read-button ">もっと見る</button>
                    </div>`;
 $( ".message-button" ).append( buttonDom );

$( document ).on( "click", "#more-read-button", function ()
    {
             console.log("クリックされたよ");  //このコードは動く    
     });

 

このように、セレクタでdocumentを指定しつつ、on()の第2引数に、追加した子要素をセレクタで渡してあげるとうまく動作します。

 

補足:方法②は原則オススメしません

 

ちなみになのですが、方法②は通常オススメはしません。

なぜなら、「$( document ).on」を使う場合は、イベントパブリングによってルートノード(document)にたどり着くまでに時間がかかるからです。

クリックした要素から、ルートノードまでの距離が生まれるので、その分コストがかかるということです。

パフォーマンス的にはよくありません。

 

実装する場合は、今回紹介した方法①を採用するのが良いと思います。

追加した要素から1つ距離は離れていますが、特に負担にはならないはずです。

距離を0にしたいと思う方(追加した要素自体にクリックイベントを設置したい方)もいるかもですが、まぁそこまで拘る必要もないかなと...。

(どうしても、追加した要素自体にクリックイベントを設置したい場合はMutationObserverを使って、domの変更を監視しつつイベントをカスタマイズすることはできます)

 

ということで、今回はjQueryで動的に追加したDOM要素にクリックイベントが効かない場合の対処方法を紹介しました。

参考になれば幸いです。

最後まで読んでいただきありがとうございました。

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-JavaScript

S