【jQuery】思ったとおりに動きません｡ｿｰｽｺｰﾄﾞはﾍｯﾀﾞに <style type="text/css"> #hoge{color:#ff0000;} #fuga{background-color:#00ff00} </style> <script type…

【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つにまとめてもﾀﾞﾒでした｡
はずしてもﾀﾞﾒです｡

$(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");
});