jQueryのlive()にとても助けられた。

jQuery

画面にて、ユーザ操作で検索条件の入力行を追加/削除する。


ってことをやりたかったわけですが、
これまた、普通に.click()で、バインドすると、動的に追加した行(というかボタン）に対しては、
イベントが動かないわけです。

onclick=""を含むような行を追加するのも格好悪いなぁ・・・
と思っていたところ、1.3以降で追加されたliveで解決。


というわけでメモ。


予想通りに動かないサンプル

<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=Windows-31J">
<title>liveサンプル</title>
<script type="text/javascript" src="../../common/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
//行番号を保持
var cnt = 1;
$(function(){

//削除ボタンイベント
	$(".delBtn").click(function() {
		//ボタンのrowId属性値を取得
		var rowId = $(this).attr("rowId");
		//本当は行を削除する処理
		alert(rowId);
	});

//行追加ボタンイベント
	$("#addRow").click(function() {
		//行番号を追加してIDとする。
		var rowId = "row" + (++cnt);
		
		//元となる行をコピーして、属性を修正する。
		var newRow = $("#row1").clone();
		newRow.attr("id", rowId);
		$(".delBtn", newRow).attr("rowId", rowId);
		
		//テーブルに行を追加
		$("#rowTable").append(newRow);
	});
});
</script>
</head>
<body>
<input type="button" id="addRow" value="追加"></input>
<table border="1" id="rowTable">
<tr id="row1">
	<td>
		<input type="button" value="削除" class="delBtn" rowId="row1">
	</td>
	<td>
		<input type="text">
	</td>
</tr>	
</table>
</body>
</html>

$(".delBtn").click(function() {

ここを、

$(".delBtn").live("click", function() {

のように書き換えると、追加した行の削除ボタンでも反応してくれます。


IDやら、classやら適当だったり、
独自属性使っていたり、
行番号を固定で連番にしてたり、
実際には行を消していなかったり、
面倒なので、ベースとなる行を用意していたりと、
まぁどうかと思うサンプルではありますが・・・



実際には、他の入力欄もあったりとかで、name属性に連番を振りたいので、
行番号をカウンタではなく、追加/削除で再計算し、既存行の、行番号を再設定したり等もしているのですが、
それは別の話ということで省略。


・・・この魅力って伝わりますか？？