イベントの扱い方その７（動的に生成された要素にも影響を与える　live()）

jQuery イベントの扱い方

イベント関連最後？早いな。

最後は動的にプログラミングする場合、かなり使う頻度が多そうな live()。

Javascriptによって動的に生成されたタグに、既に定義してあるイベントが反映されるようにする。
サンプルでは上側枠線内に表示される文字列は１行目はクリックによってフォントサイズが大きくなっていくが、動的に生成される２行目以降は大きくならない。
それに比べ、下側枠線内に表示される文字列は１行目は勿論、動的に生成される２行目以降の文字列もクリックによってフォントサイズが大きくなっていく。

注意すべきは、ボタンを押した際に、下側枠線内に追加されるdivに直接イベントを登録しているわけではないというところ。あくまでも初期化時に定義されたイベントのみで上記の処理を実現している。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function() {
        $("#div1 .div1Class").click(function(){
          var div = $(this);
          var size = div.css("font-size");
          div.css("font-size", parseInt(size) + 1);
        })
        $("#div2 .div2Class").live("click", function(){
          var div = $(this);
          var size = div.css("font-size");
          div.css("font-size", parseInt(size) + 1);
        })

        $("#button1").click(function(){
          $("#div1").append("<div class='div1Class' style='font-size: 16;'>ぱんぱかぱんつ1</div>");
        })
        $("#button2").click(function(){
          $("#div2").append("<div class='div2Class' style='font-size: 16;'>ぱんぱかぱんつ2</div>");
        });
      })
    </script>
  </head>
  <body>
    <div id="div1" style="border-style: solid; border-width: 1px;">
      <div class="div1Class" style="font-size: 16;">ぱんぱかぱんつ1</div>
    </div>
    <br/>
    <div id="div2" style="border-style: solid; border-width: 1px;">
      <div class="div2Class" style="font-size: 16;">ぱんぱかぱんつ2</div>
    </div>
    <br/>
    <input id="button1" type="button" value="div1に要素を追加" />
    <input id="button2" type="button" value="div2に要素を追加" />
  </body>
</html>