JQuery いつでも.onメソッド

.onメソッドについて

最近自分の中だけで流行ってる.onメソッドについて簡単なまとめ

.onメソッドとは

まずは書き方

js

$(function(){
    $('button').click(function(){
        //何らかの処理
    });
});

これを　

js

$(function(){
    $('body').on('click','button',function(){
        //何らかの処理
    });
});

こんなふうにかける

何がいいのか

いろいろあるけど
動的に作られた要素に対して、イベントを割り当てることができる ←これ

js

$(function(){
    $('button').click(function(){ //ボタンをクリックしたら
        var p = $('<p>').text('テキスト').addClass('js-text'); //変数pに代入
        $(this).after(p); //クリックしたボタンの後に<p class="js-text">テキスト</p>
    });

    $('document').on('click','.js-text',function(){
        $('.js-text').css("color","red");
    });

});

この場合、.onメソッドを使って書かないとボタンをクリックして出てくるテキストの色をかえることができない

簡単な解説

普通に.clickで書いた場合

• （.readyをつかってるのでDOMが全て読まれたあとに処理が実行される）
• このjsが読まれた時点では追加されるtextは存在してない → 追加のテキストが認識されない

てかんじでテキストの色をかえるjsが効かない

そこを.onでかいてやると

イベントが親セレクター（親要素）によって管理されるので、
配下の子要素が増減しても、そのイベントを監視できる
（この場合、$('document') 以下を監視）

いつ使うのか

いつでも使うことをお勧めします。
なにも考えずいつでもどこでも.onしましょう
htmlかdocument、bodyに対して使っとけば間違いない

ただし、

SPサイトに関してはこの限りではありません。
iphone、iosの問題によるもので
bodyとかdocumentに対してこれが使えない
イベントが設定できない、というかバブリングが伝番されないのが理由らしい

ということで、上記以外の親セレクターに対して設定すればOKなんだけど
どこにしよう…ってなるので（考えるのめんどくさい）
SPサイトは必要なときだけ使えばいいと思う。