さんまがおいしい季節だねー(´・ω・`)

jQueryのlive関数が超便利な件について

JavaScript — タグ: — さくら @ 2011/08/09 15:44

先日 jQueryMobile をいじくってたらいまいちよく分からなかった部分があったので jQueryMobile のソースとかサンプルをだらだら見ていたのですが、live() という関数がちょいちょい使われてたので気になって調べてみました…ら、超便利なことが判明したので生存戦略しとこうと思います。

とりあえず semooh.jp さんの日本語リファレンスによると、live 関数は未登録の DOM オブジェクトに対しても動作するイベントハンドラを登録する関数のようです。

jQuery 1.3より実装。
イベントに対してハンドラを登録します。
登録されたイベントは、現在および将来的にも、セレクタにマッチする全ての要素に適用されます。
カスタムイベントに対してbindすることも可能です。

live(type, fn) – jQuery 日本語リファレンス

って、これって超便利じゃん!
って、これって超便利じゃん!

(大事なことなので2回ry)

何が便利かいまいちよく分からなかった方がいるといけないので、どう便利なのか力説したいと思います。

例えば↓のようなソースがあったとします。

<!doctype HTML>
<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
   $(function() {
     $('#actionButton').click(function() {
       var today = new Date();
       $('#today').text(today.toLocaleString());
     });
   });
   //]]>
    </script>
  </head>
  <body>
    <div id="today">TODAY</div>
    <input id="actionButton" type="button" value="CLICK!">
  </body>
</html>

サンプルということで中身は簡単ですが、#actionButton がクリックされると #today に現在の日時をセットするスクリプトになってます。

JavaScript を head に置いているので、script タグが読み込まれた時点では #actionButton は DOM ツリー上に存在せずアクセスできません。なんで #actionButton のイベントハンドラの登録はドキュメントの読み込みが終了してから行う必要があるので $() 内に記述しています。($() = $(document).ready()…のはずw)

で、これを live で書き直すとこんな感じになります。

<!doctype HTML>
<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
   $('#actionButton').live('click', function() {
     var today = new Date();
     $('#today').text(today.toLocaleString());
   });
   //]]>
    </script>
  </head>
  <body>
    <div id="today">TODAY</div>
    <input id="actionButton" type="button" value="CLICK!">
  </body>
</html>

$(function() { }); が無くなったのでだいぶスッキリしました。

そんだけじゃん(`皿´)と思うかもしれませんが、live を使うと存在していないオブジェクトに対してイベントハンドラを登録できるので、Ajax で読み込んだオブジェクトに対しても先にイベントハンドラの登録を行っておくことができます。例えばこんな感じ。

<!doctype HTML>
<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
   $('#actionButton').live('click', function() {
     var today = new Date();
     $('#today').text(today.toLocaleString());
   });
   $(function() {
     $.get('today.html', function(data) {
       $('body').append(data);
     });
   });
   //]]>
    </script>
  </head>
  <body></body>
</html>

today.html の中身は↓。(上の例と同じです。)

<div id="today">TODAY</div>
<input id="actionButton" type="button" value="CLICK!">

#actionButton は $.get() が完了してから DOM ツリー上に表れますが、問題なく動きます。( ゚∀゚)o彡゚超便利!超便利!

Ajax 経由で取得したデータを元に動的に HTML を構築しつつ、構築したオブジェクトにイベントハンドラを設定するのって結構面倒くさかったりするのですが(イベントハンドラを登録したら class 属性とかにフラグを持たせてイベントハンドラの2重登録を防いだりした記憶がゴニョゴニョ)、live ならそういうコードも簡単に書けます。

てことで click とかでハンドラ登録してるソースを見かけたらダサッと言ってやりましょうww

         し!     _  -── ‐-   、  , -─-、 -‐─_ノ
‌  小 cli    // ̄> ´  ̄    ̄  `ヽ  Y  ,  ´     )   cli え
‌  学 ck    L_ /                /        ヽ  ck  |
‌  生 が    / ‘                ’           i  !? マ
‌  ま 許    /                 /           く    ジ
‌  で さ    l           ,ィ/!    /    /l/!,l     /厶,
‌  だ れ   i   ,.lrH‐|’|     /‐!-Lハ_  l    /-!’|/l   /`’メ、_iヽ
‌  よ る   l  | |_|_|_|/|    / /__!__ |/!トi   i/– 、 レ!/   / ,– レ、⌒Y⌒ヽ
‌  ね の   _ゝ|/’/⌒ヽ ヽト、|/ ’/ ̄`ヾ 、ヽト、N’/⌒ヾ      ,イ ̄`ヾ,ノ!
‌   l は  「  l ′ 「1       /てヽ′| | |  「L!     ’ i’ひ}   リ
‌        ヽ  | ヽ__U,      、ヽ シノ ノ! ! |ヽ_、ソ,      ヾシ _ノ _ノ
‌-┐    ,√   !            ̄   リ l   !  ̄        ̄   7/
‌  レ’⌒ヽ/ !    |   〈       _人__人ノ_  i  く            //!
‌人_,、ノL_,iノ!  /! ヽ   r─‐- 、   「      L_ヽ   r─‐- 、   u  ノ/
‌      /  / lト、 \ ヽ, -‐┤  ノ  キ    了\  ヽ, -‐┤     //
‌ハ キ  {  /   ヽ,ト、ヽ/!`hノ  )  モ    |/! 「ヽ, `ー /)   _ ‐’
‌ハ ャ   ヽ/   r-、‐’ // / |-‐ く    |     > / / `’//-‐、    /
‌ハ ハ    > /\\// / /ヽ_  !   イ    (  / / //  / `ァ-‐ ‘
‌ハ ハ   / /!   ヽ    レ’/ ノ        >  ‘ ∠  -‐  ̄ノヽ   /
‌       {  i l    !    /  フ       /     -‐ / ̄/〉 〈 \ /!

ちなみに、上記の日本語リファレンスでは blur, focus, mouseenter, mouseleave, change, submit については live でイベントハンドラ登録ができないと書かれていますが、jQuery-1.6.2 では submit は live できました。

submit 以外は調べていませんが、公式のlive のマニュアルには制限っぽいことは特に書かれていませんでしたので jQuery のバージョンが上がってどれでも動くようになってんじゃないかと思います。まあこの辺はトライアンドエラーでえーんじゃないでしょうかw

輪るピングドラム 1 [Blu-ray] 輪るピングドラム 1 [Blu-ray]

高倉冠葉(木村昴) (出演), 高倉晶馬(木村良平) (出演), 幾原邦彦 (監督)
キングレコード (2011/0/28)
売上ランキング: 115

Amazonで詳しく見る by AZlink

8件のコメント »

  1. > jQuery-1.6.2 では submit は live できました。
    live() はイベントバブリングに依存していますから、バブリングする submit で live() が働く実装が正しいです。(DOM L2 Events 規定)
    しかしながら、IE8- は submit をバブリングしないバグがあるので、live() が働かないと思います。
    # 日本語リファレンスは非公式で最新情報が反映されていないので参考程度にしておいた方がいいかも。
    http://api.jquery.com/live/#event-delegation

    コメント by think49 — 2011 年 8 月 19 日 @ 01:05
  2. The hotel is always well-appreciated for the
    facilities and services it includes to the guests. This permits them to offer more personalized service and create a welcoming feeling.
    Again, the interior or the resort isn’t very appealing.

    コメント by http://iratebackpack6638.wordpress.com — 2013 年 10 月 5 日 @ 10:29
  3. モンクレール 偽物
    チャンピオン http://www.wupnr.com/

    コメント by チャンピオン — 2013 年 10 月 18 日 @ 13:33
  4. kbcIRFiFHwWOulCxzg 3411

    コメント by KUemOuxRamcuDjM — 2014 年 10 月 5 日 @ 17:53
  5. Saved as a favorite, I really llike your website!

    コメント by pewangi laundry murah di jogja — 2016 年 11 月 15 日 @ 02:44
  6. This design is wicked! You cеrtainly кnow how to keep
    а reader entertained. Between yopur wit annd yօur videos, I wɑs alnost mpved to start myy
    own blog (աell, almost…HaHa!) Excellent job. I
    reаlly enjoyed աhat уou had tto ѕay, ɑnd more than that, hօw
    you preѕented it. Too cool!

    Alsoo visit mу web pge :: parfum laundry jakarta

    コメント by parfum laundry jakarta — 2016 年 11 月 19 日 @ 13:08
  7. top your post,..

    コメント by parfum laundry — 2017 年 1 月 10 日 @ 00:25
  8. thanks for all the information that has been posted on this page may be useful, ..

    コメント by pewangi laundry — 2017 年 3 月 25 日 @ 16:06

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity