Web制作の現場で使えるjQuery　UIデザイン入門 ― 第7回

jQueryのイベントをチュートリアルで学ぶ（後編） (2/2)

将来追加される要素にイベント処理を設定できる live()

　現在と将来追加される要素に対して、イベント処理を設定できるのが live() です。「将来追加される要素」と聞くとちょっと分かりにくいですね。以下のソースコードを見てください。

▼サンプル16（スクリプト部分）

$(function(){
    $("a").click(function(){
        $("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
        return false;
    })
    $("button").click(function(){
        $("ul").append("<li><a href="Building.jpg">建物</a></li>")
    })
})

▼サンプル16（元の(X)HTML部分）

<button>li要素を追加</button>
<ul>
    <li><a href="flower.jpg">花</a></li>
    <li><a href="sea.jpg">海</a></li>
    <li><a href="Jellyfish.jpg">くらげ</a></li>
</ul>
<p><img src="flower.jpg" alt="花" /></p>

　このプログラムでは、（1）a要素がクリックされると画像を切り換える命令、（2）button要素がクリックされるとul要素に対して新しいli要素（a要素を含む）を追加する命令、の2つが設定されています。さてこの場合、（2）のイベント処理のあとに（1）を実行するとどうなるでしょうか？　button要素をクリックしたことで追加された「建物」のa要素をクリックすると、画像は切り換わるのでしょうか？

　答えは×です。「花」「海」「くらげ」のa要素をクリックすると画像は切り換りますが、「建物」のa要素をクリックしても画像は切り換わらず、a要素のhref属性に記述されているリンク先に移動してしまいます。

▼サンプル16（実行結果）

サンプル16。button要素をクリックすると追加される「建物」には、a要素を対象としたイベントの処理が適用されない

　理由は、a要素に対してイベント処理が設定されたタイミングです。a要素のイベントの処理は、 $(function(){...}) で(X)HTMLがブラウザーに読み込まれた時点に設定されています。この段階では、(X)HTMLには「建物」のa要素は存在していません。

　こうした、イベント設定当時には存在していなかった要素に対してもイベントの処理を適用できるのが、live() です。

$(セレクター).live("イベント発生の条件",function(){
    //実行したい命令
})

　たとえば先のスクリプトの場合、次のように記述すれば、(X)HTMLが読み込まれた段階では存在していない「建物」にも、イベント処理を設定できます。

▼サンプル17（スクリプト部分）

$(function(){
    $("a").live("click",function(){
        $("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());
        return false;
    })
    $("button").click(function(){
        $("ul").append("<li><a href="Building.jpg">建物</a></li>")
    })
})

▼サンプル17（実行結果）

サンプル17。button要素をクリックすると追加される「建物」にも、a要素を対象としたイベントの処理が適用される

jQueryのイベントのまとめ

　最後に、第6回～7回で解説したjQueryのイベントを表にまとめます。

命令	意味
click()	クリック時に命令を実行する
dblclick()	ダブルクリック時に命令を実行する
mousedown()	マウスのボタンが押された時に命令を実行する
mouseup()	マウスのボタンが離された時に命令を実行する
toggle()	クリックされるたびに異なる命令を実行する
mouseover()	マウスオーバー時に命令を実行する
mouseout()	マウスアウト時に命令を実行する
mousemove()	マウスが移動したときに命令を実行する
one（）	イベント発生時に一度だけ命令を実行する
unbind()	設定されているイベント処理を取り消す
live()	将来追加される要素にイベント処理を設定する

◆

　セレクター、(X)HTML/CSSを操作する命令、イベント――とひととおり解説してきたjQueryの基本的な要素についてはここまでです。この間、さまざまなサンプルを紹介してきましたので、ぜひ実際に動かしながら、jQueryを使ったプログラムを書く感覚をつかんでおいてください。

　次回はjQueryを使ったフォームの制御方法について解説します。

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。