後から追加されたエレメントにも自動的にイベントを割り当てられるようにする

書式

$(〜).live(eventName, func)

eventName : イベント名
func : イベント発生時に行う処理

説明

後から追加されたエレメントにも自動的にイベントを割り当てられるようにするにはlive()を使います。最初のパラメータにイベント名、2番目のパラメータにイベント発生時に行う処理(関数/イベントハンドラ)を指定します。

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(function(){
$(".box").live("mouseover",
function(){
alert("マウスが乗りました");
}
);
});
// class=boxのdivエレメントを追加
function addBox(){
$("body").append($("<div class='box'>追加したボックスです。ここにも自動的にイベントが割り当てられます。</div>"));
}
// --></script>
</head>
<body>
<h1>ライブイベント</h1>
<form>
<input type="button" value="boxを追加" onclick="addBox()">
</form>
<div class="box">[class=box]ここにマウスカーソルを乗せてください</div>
</body>
</html>