【jQuery】.on clickイベントが効かない時の対処方法

jQuery1.8ぐらいから、
.click(function(){}) →.on('click', 'id', function() {})
↑で書くべし的な事を言われてちゃんと.onで書いているのになぜか？効かない。。。

1時間ぐらいハマったのでメモ。。

.on()メソッドはjQuery1.7に登場ですので、
当然それより前のバージョンでは使用できません。。

意外と見落としてしまいます。

レスボンシブ対応の比較的新しいサイトでv1.5.2が使われていた。。なんて事もありました。

わりとよく使うjs系をテンプレセットにして何年も使う会社もありますし、古いサイトのメンテやセミリニューアルなどで物凄く古いjQuery Libraryに出会う事もあります。

＊ファイル名が「jquery.js」とバージョン名が書かれていない物は、中身（ソース）を見て上の方に↓など記載が無いか確認。

/*!
 * jQuery JavaScript Library v1.5.2
 * http://jquery.com/  */

↑この場合、バージョン1.5.2です。

$('#id').on('click','li>a', function() {
//クリックした後の処理
});

↑こちらから↓こちらへ（.onを使わず.clickで記述する）

$('#id li>a').click(function(){
//クリックした後の処理
});

jQuery1.9の現象なのか?後から.appendや.html()などで追加した要素に効かない場合があります。

動的に変化する要素へのイベントは、変化しない親の要素に仕込むと動きます。

$('#id').on('click',function() {
//クリックした後の処理
});

↑こちらから↓こちらへ（「document」もしくは静的な親要素をセレクタに入れる）

$(document).on('click','#id', function() {
//クリックした後の処理
});

【注意点】
この場合、内部的には#idに対してイベントを割り振っているのでなく、documentでclickイベントを拾う→event.targetのIDがidだった場合に発動します。
なので、clickイベントは問題なく動きますが、scrollイベントなどの場合は動かないかもしれません。

ちなみに1と2両方対象で、
.on → .liveに変えるでもOK

$('#id li>a').live('click',function(){
//クリックした後の処理
});

.live → 後から追加した要素にもイベントを実行させる
（セレクタを「document」などにしなくても良い）
※liveはjQuery1.9で廃止