こんにちは
制作部 川崎です
タイトルの件ですが、
例えば、
<div class=”btn_area”>
</div>
このdivタグに
<a href=”javascript:void(0);” class=”btn_type” data-id=”5″>追加ボタン<a>
をjQuery使って追加した時
追加後にDOMを確認すると
<div class=”btn_area”>
<a href=”javascript:void(0);” class=”btn_type” data-id=”5″>追加ボタン<a>
</div>
こんな風に出来上がってると思います。
この追加したaタグをクリックした時のイベントの書き方ですが
通常のクリックイベントは
$(‘.btn_type’).on(‘click’,function(){
***ここにクリック時に実行するコード***
})
の様に書くと思います。
でも、jQueryで後から項目追加した時は、これでは動作しません。
$(‘.btn_type’)は、ページが表示された時には存在していなかった項目なので
イベントが関連付けできてません。
そこで
$(‘body’).on(‘click’,’.btn_type’,function(){
***ここにクリック時に実行するコード***
})
の様に書いておけば
click時に「body」内の「.btn_type」を探して実行してくれるみたいです。
これで、後から追加した項目でも「on」イベントで使えるアクションなら無事に利用できるようになります。
動いて良かった・・・・・・