【jQuery】思ったとおりに動きません。

$(function(){
	$("#hoge").live("click", function() {
		window.alert("hoge");
		$("#hoge").attr("id","fuga");
		window.alert("hoge");
	});

	$("#fuga").live("click", function() {
		window.alert("fuga");
	});
});

・live(type, fn)
http://semooh.jp/jquery/api/events/live/type,+fn/

bindとほぼ同様の関数ですが、ハンドラ登録時にマッチする要素だけでなく、永続的にイベント発生時点でマッチする要素に反応する点が異なります。
例えばli要素に対してclickイベントを登録した場合、bindであれば、その時点でページ上に存在するli要素に対してイベントが登録されるだけでした。しかしliveでは、その後で動的にli要素が追加された場合も、そのli要素でのクリックに対してハンドラが実行されます。

【追記】

公式サイトの解説では、『jQuery1.7で.live()は推奨されなくなった。イベントハンドラを登録するには.on()を使用してください。古いバージョンのjQueryでは.delegate()を使用してください。』とありますので、使用しているjQueryのバージョンに合わせて選択してください。

http://api.jquery.com/live/

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

それぞれ以下のようにすると同様の動作になります。

http://api.jquery.com/delegate/

	// 1.4.3+
	$(document).delegate("#hoge", "click", function() {
		window.alert("hoge");
		$("#hoge").attr("id","fuga");
		window.alert("hoge");
	});

	$(document).delegate("#fuga", "click", function() {
		window.alert("fuga");
	});

http://api.jquery.com/on/

	// 1.7+
	$(document).on("click", "#hoge", function() {
		window.alert("hoge");
		$("#hoge").attr("id","fuga");
		window.alert("hoge");
	});

	$(document).on("click", "#fuga", function() {
		window.alert("fuga");
	});