jQuery afterやappendで追加した要素にもクリック等のイベントを適応する方法（jQuery1.3から1.10まで）
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんにちは。Toshikutaです。今回のTipsは【jQuery afterやappendで追加した要素にもクリック等のイベントを適応する方法（jQuery1.3から1.10まで）】です。jQueryのバージョンが1.7以降ではon,offを使用すれば問題有りませんが、1.3系〜1.6系ではon,offが使えまないのでlive,dieで実装する必要があります。1.7〜1.8系ではonもliveも使用できますが…長い目で見るとonを使用した方が懸命かと。jQueryのバージョンによって注意が必要ということもありメモしておきます。
onでの実装
例ではクラス名【on】をクリックした際にafterによって要素追加が行われます。追加された要素をクリックしてもafterによって更に要素が追加されます。1.7系以降で動作します。
JS
$(document).on(‘click’,’.on’,function(){
$(this).after(‘<li class="on">MEOW</li>’);
});
liveでの実装
liveでの実装方法です。1.3〜1.6系では使用する必要が有りますが1.9以降では動作しませんので注意が必要です。
JS
$(function(){
$(‘.on’).live(‘click’,function(){
$(this).after(‘<li class="on">MEOW</li>’);
});
});