Read more: #
サンプル15の実行画面 。「取り消し」ボタンをクリックすると設定されているイベン
Read more: #
将来追加される要素にイベント処理を設定できる live()
現在と将来追加される要素に対して、イベント処理を設定できるのが live() です 。「将来追加される要素」と聞くとちょっと分かりにくいですね 。以下のソースコードを見てください 。
▼サンプル16（スクリプト部分）
$(function(){$("a").click(function(){$("img").attr("src",$(this).attr("href")).attr("alt",$(this).text());return false;})$("button").click(function(){$("ul").append("

Building.jpg">建物

")})})
▼サンプル16（元の(X)HTML部分）
li要素を追加

• href="http://www.kingceram.com/post/flower.jpg">花
• href="http://www.kingceram.com/post/sea.jpg">海
• href="http://www.kingceram.com/post/Jellyfish.jpg">くらけ?

src="http://www.kingceram.com/post/flower.jpg" alt="花" />

このプログラムでは、（1）a要素がクリックされると画像を切り換える命令、（2）要素がクリックされるとul要素に対して新しいli要素（a要素を含む）を追加する命令、の2つが設定されています 。さてこの場合、（2）のイベント処理のあとに（1）を実行するとどうなるでしょうか？要素をクリックしたことで追加された「建物」のa要素をクリックすると、画像は切り換わるのでしょうか？
答えは×です 。「花」「海」「くらげ」のa要素をクリックすると画像は切り換りますが、「建物」のa要素をクリックしても画像は切り換わらず、a要素のhref属性に記述されているリンク先に移動してしまいます 。
▼サンプル16（実行結果）
サンプル16 。要素をクリックすると追加される「建物」には、a要素を対象としたイベントの処理が適用されない
理由は、a要素に対してイベント処理が設定されたタイミングです 。a要素のイベントの処理は、 $((){...}) で(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("

Building.jpg">建物

")})})
▼サンプル17（実行結果）
サンプル17 。要素をクリックすると追加される「建物」にも、a要素を対象としたイベントの処理が適用される
のイベントのまとめ
最後に、第6回～7回で解説したのイベントを表にまとめます 。
命令意味
click()
クリック時に命令を実行する
()
ダブルクリック時に命令を実行する
()
マウスのボタンが押された時に命令を実行する
()
マウスのボタンが離された時に命令を実行する
()
クリックされるたびに異なる命令を実行する
()