【コピペコード有り】後から追加した要素にイベント発生させる方法

クリックしても動かない!どうする??

appendイベントやbeforeイベントで、後から追加されるHTML要素。

jQueryのプラグインなどに良くある形態です。

そして上記の追加要素にクリックイベントを設定したいケースってあると思います。

で、「よし、ググったところonメソッドなら大丈夫なんだな」と思って、「$(’selector’).on(’click’, function() 〜」と記載。

しかし、該当要素をクリックしても何も反応しない!

一体、何がいけないのでしょうか?

単にonメソッドを指定しても効かない場合がある。

例えば、以下のようなHTMLがあり <button id=”b”>ボタンB</button>は、後からjQueryで追加された要素だったとします。

上記のHTMLに対して、<button id=”b”>をセレクタとしたクリックイベントが指定されているにも関わらず、処理が働かないことがあります。
(※onイベントの指定が、要素の追加指定より先に記述されていると効きません。)

親要素をセレクタに、当該要素を第2引数に設定すれば動く。

しかし、親要素である<div class=”hoge”>をセレクタに、<button id=”b”>を第2引数に設定すると上手く動きます。

<div class=”hoge”>は、クリックイベント発生時にすでに存在している要素なので、上手く処理が働くわけです。

コピペでOK!追加した要素にイベントを発生させるコード。

セレクタにDOM階層のルートに相当するdocumentを指定すると、さまざまな状況で使い回しが効く、汎用的なコードとなります。

要するに下記なら、たいていの状況においてコピペでOKってことです。

‘該当要素を記述’に、クリックする要素を記述してお使いいただければと思います。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags

Trackbacks & Comments

Trackback URL for this post:

Leave a Reply