クリックしても動かない!どうする??
appendイベントやbeforeイベントで、後から追加されるHTML要素。
jQueryのプラグインなどに良くある形態です。
そして上記の追加要素にクリックイベントを設定したいケースってあると思います。
で、「よし、ググったところonメソッドなら大丈夫なんだな」と思って、「$(’selector’).on(’click’, function() 〜」と記載。
しかし、該当要素をクリックしても何も反応しない!
一体、何がいけないのでしょうか?
- 目次:後から追加した要素にクリックイベントを発生させる方法
単にonメソッドを指定しても効かない場合がある。
例えば、以下のようなHTMLがあり <button id=”b”>ボタンB</button>は、後からjQueryで追加された要素だったとします。
1 2 3 4 |
<div class="hoge"> <button id="a">ボタンA</button> <button id="b">ボタンB</button><!--あとから足されたボタンB--> </div> |
上記のHTMLに対して、<button id=”b”>をセレクタとしたクリックイベントが指定されているにも関わらず、処理が働かないことがあります。
(※onイベントの指定が、要素の追加指定より先に記述されていると効きません。)
1 2 3 |
$('#b').on('click', function() { //ここに処理【動かない!】 }); |
親要素をセレクタに、当該要素を第2引数に設定すれば動く。
しかし、親要素である<div class=”hoge”>をセレクタに、<button id=”b”>を第2引数に設定すると上手く動きます。
1 2 3 |
$('.hoge').on('click', '#b' , function() { //ここに処理【上手く動く!】 }); |
<div class=”hoge”>は、クリックイベント発生時にすでに存在している要素なので、上手く処理が働くわけです。
コピペでOK!追加した要素にイベントを発生させるコード。
セレクタにDOM階層のルートに相当するdocumentを指定すると、さまざまな状況で使い回しが効く、汎用的なコードとなります。
要するに下記なら、たいていの状況においてコピペでOKってことです。
1 2 3 4 5 |
$(function() { $(document).on('click', '該当要素を記述' , function() { //ここに処理を記述 }); }); |
‘該当要素を記述’に、クリックする要素を記述してお使いいただければと思います。
超多機能でSEOに強い!ブロガー・アフィリエイターを虜にするWPテーマDIVER
国内最速のサイト表示スピード!最新技術が詰め込まれたWPテーマTHE THOR