$.fn.〜で選択したセレクタ利用して、.live()を実現
昨日『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');
});
});
クリックでアラート表示（alert($(this).text());）
意図通りに、最初からある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');
});
});
クリックでアラート表示（alert($(this).text());）
この書き方だと、最初からある要素ではアラートが表示されますが、追加した要素ではクリックしてもアラートがでません。
追加した要素にもイベントを付けておきたい場合などは、先程のような書き方をするのがよさそうです。
最後に
ちょっと前にもつぶやいたのですが、プラグインを作る上で、イベントを.live()や.delegate()でもたせておくのと、.each()で取得した要素のみにbindするのでは、どちらがいいのか現時点で把握できていません。もし使用する際は、そのへんは考えて作成するようお願いします。今回のが特別いい！という訳でもないので、ご理解ください。あくまでも、どのようにするかメモエントリー。
