THE HAM MEDIA BLOG

昨日『jQueryで選択したセレクタをハンドラ内で確認』というエントリーを書いたのですが、これを使えば独自メソッド内でliveのイベントを付けたい時にセレクタを簡単に使えると思ったので、昨日に続きメモエントリー。

.live(function(){})は$(document).on('Event','Selector',function(){})

jQuery 1.7での.live()は.on()に統合されています。同じように書くには、

$(document).on('Event','Selector',function(){
    //何か処理
});

この様に書く必要があります。

$.fn.◯◯〜のようなプラグインを作成して、プラグイン内部で.live()を使わずに.on()で同様の機能を得るためには、選択しているセレクタを書き入れる必要があります。そのため、利用しているセレクタの文字列が必要になったのです。

では簡単に、クリックした要素のテキストをアラートで表示するプラグインを書いてみましょう。

(function($){
    $.fn.alertSelector = function(){
        $(document).on('click',this.selector,function(){
            alert($(this).text());
        });
    };
})(jQuery);
jQuery(function($){
    $('#demo1 p').alertSelector();
    
    //要素の追加
    $('#demo1 button').on('click',function(){
        $('<p>クリックでアラート表示（alert($(this).text());）</p>').appendTo('#demo1');
    });
});

意図通りに、最初からあるp要素だけでなく、追加されたp要素でもアラートが出るようになっています。

これがベストな書き方かどうかはわかりませんが、とりあえずプラグインとしても動作します。

.live()ではなく、.delegate()での置き換えの場合、範囲を絞り込むセレクタをもう一つどこかに保持して、それを利用するようにする必要があります。ですが、今回は割愛しておきます。

.each()で作成してみる

では、今度はプラグインを.each()を使って作成してみます。

(function($){
    $.fn.alertSelectorEach = function(){
        return this.each(function(){
            $(this).on('click',function(){
                alert($(this).text());
            });
        });
    };
})(jQuery);
jQuery(function($){
    $('#demo2 p').alertSelectorEach();
    
    //要素の追加
    $('#demo2 button').on('click',function(){
        $('<p>クリックでアラート表示（alert($(this).text());）</p>').appendTo('#demo2');
    });
});

この書き方だと、最初からある要素ではアラートが表示されますが、追加した要素ではクリックしてもアラートがでません。

追加した要素にもイベントを付けておきたい場合などは、先程のような書き方をするのがよさそうです。

最後に

ちょっと前にもつぶやいたのですが、プラグインを作る上で、イベントを.live()や.delegate()でもたせておくのと、.each()で取得した要素のみにbindするのでは、どちらがいいのか現時点で把握できていません。もし使用する際は、そのへんは考えて作成するようお願いします。今回のが特別いい！という訳でもないので、ご理解ください。あくまでも、どのようにするかメモエントリー。