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

ソースコードは
ヘッダに
<style type="text/css">
#hoge{color:#ff0000;}
#fuga{background-color:#00ff00}
</style>
<script type="text/javascript">
$(function(){
$("#hoge").click(function() {
window.alert("hoge");
$("#hoge").attr("id","fuga");
window.alert("hoge");
});
});
$(function(){
$("#fuga").click(function() {
window.alert("fuga");
});
});
</script>
ボディに
<p id="hoge">aaaa</p>
です。
クリックするとスタイルではたしかにaaaaのidはhogeからfugaになっています。
でも次のクリックでwindow.alert("fuga")が実行できません。
window.alert("hoge")が出ます。
window.alert("fuga")が出ないと困るんですけど、どうにかしてください。
$.readyを1つにまとめてもダメでした。
はずしてもダメです。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/12/26 20:51:58
  • 終了:2011/12/27 12:32:28

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512011/12/26 22:08:12

ポイント100pt
$(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");
	});

id:alan_i_jp

詳しくどうもありがとうございました。
質問内容は、動的に生成されたものに対して、$().clickは使えないか?ということで、答えは.liveだと使えて、新しいバージョンだと.delegateや.onが推奨されるということでした。.liveで対応してなかったsubmitイベントに.delegateや.onでは対応してるみたいです。

2011/12/27 12:28:24
id:rouge_2008

ご報告ありがとうございます。
.live()についても、1.4でsubmit等の未対応のイベントに対応済みのようです。
簡単に試してみただけですが、確かに動作しました。

http://semooh.jp/jquery/cont/doc/release_1.4.0/

ほぼ全てのイベントがLive Events対応
readyとfocus(代わりにfocusin> 利用を推奨)、そしてblur (代わりにfocusout利用を推奨)を除き、bind()でバインドできる全てのイベ ントがliveイベントで使えるようになりました。

.live()で実行される下記イベントのクロスブラウザサポートも実装したことを報告します。(change, submit, focusin, focusout, mouseenter, mouseleave)

前述の通り、focusとblurはバブリング処理に対応していないので、focusイベントを利用する場合は、focus/blurではなくfocusin/focusoutを使ってください。


http://tech.kayac.com/archive/jquery-1.4-new.html

13. live()が全イベントに対応

以前までのバージョンのlive()はsubmitやfocusなど、対応してないないイベントもありましたが、今回全てのイベントに対応したようです。ただしfocus、blurはfocusin、focusoutを指定する必要があります。

2011/12/27 15:30:03
  • id:alan_i_jp
    ほんとはちゃんとtabでインデントして投稿したんですよ。
    でも取り除かれちゃったんです。
    見にくくてすいません。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません