動的に生成した要素へのイベント付加(jQuery)

jQueryにてイベントを追加する場合、一番簡単な方法としてclick()なんかを使う方法があげられます。

$(".sample").click(function(){
/* function */
 });

これでsampleクラスが含まれる要素をクリックした際にイベントが呼び出されます。

しかしjavascriptを使用して、sampleクラスを含む要素を生成する、あるいはsampleクラスを追加した場合には、このイベントが呼び出されないようです。どうやらページがロードされた時点での要素構成情報しか、jQueryは把握していないよう。速度を考えると当たり前か。

で、ここで登場するのがlive()関数・・・だったはずなんですが、ver. 1.9で廃止されたようで、ここで小一時間悪戦苦闘したのは内緒ですw

本題。ver. 1.9以降はon()関数を使うとのこと。

$(document).on("click", ".sample", function(){
/* function */
});

第一引数にイベント名、第二引数に適用する要素、第三引数に実行する関数を記述します。チェインのあたまにある「$(document).」はおまじないです”笑

参考:jQuery の on() と off() を理解する
http://tacamy.hatenablog.com/entry/2013/03/03/213113

2013/08/25追記

iOSではon()関数が動作しないらしい。iPhoneの類いを持っていないので、検証は出来ませんが。jQuery内部でクラッシュしているとか。回避策として対象要素にonclick=””を入れることなどが挙げられてるけど、有効性は検証できてないです。さて困った・・・。

投稿日:
カテゴリー: ICT タグ:

作成者: きたけん

神戸出身&在住。大学では環境を学び、今はまちづくりに携わる。思い立ったらすぐに飛び出してしまう。