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

カレンダーDate: | カテゴリーCategory:WordPressテーマのカスタマイズ方法【HTML・CSSの基礎も】
※景品表示法に基づく表記:本記事には商品の広告が含まれています

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

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ってことです。

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

Tags

Trackbacks & Comments

Trackback URL for this post:

Leave a Reply

flight