jQuery afterやappendで追加した要素にもクリック等のイベントを適応する方法(jQuery1.3から1.10まで)

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。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>’);
});
});

以上になります。