jQueryで追加した要素にクリックイベントを設定する方法

javascript
この記事は約2分で読めます。
スポンサーリンク

jQueryで後から追加した要素は、普通にクリックイベントを設定しても動かない。
そんな時の解決方法のご紹介です。

後から追加した要素にクリックイベントを発火させる方法

例として下のHTMLをjQueryで追加します。

jQueryで追加したHTML

<div class="demo"></div>

この追加したHTMLにクリックイベントを発生させる方法はこちらです。

jQuery

$(document).on("click", ".demo", function() {
  // 「.demo」が押された時の処理
});

jQueryの説明です。
最初の「$(document)」は、ページの全要素を指定している。
全要素にクリックイベントを指定して、「全要素」の中の「.demo」が押されたらをさらに指定すると、後から追加した要素にもクリックイベントを発火できる。
この指定方法だと、HTMLが数千行も書いてあるページだと処理が若干遅くなります。
処理を早くするには「$(document)」ではなく、もっと範囲の小さい親要素または先祖要素を指定する。

処理の早い追加した要素にクリックイベントを発火させる方法

下のHTML「.demo」にjQueryで「p」タグを追加しています。

jQueryで「.demo p」を追加したHTML

<div class="demo">
  <p></p>
</div>

jQuery

$(".demo").on("click", "p", function() {
  // 「.demo p」が押された時の処理
});
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQuery

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました