jQuery：divのIDを2回変更すると

Question

私はdivのIDをユーザーがクリックしたときにトグルしようとしています。 まずクリック作品、そしてそれはdivのIDを変更しますが、もう一度押すと、それは

$("#hello").click(function(){ 
    $(this).attr("id","bye").text("bye"); 
}); 

$("#bye").click(function(){ 
    $(this).attr("id","hello").text("hello"); 
}); 

<div id="hello">hello</div> 

....再び、この作業を取得する方法の任意のアイデアをdiv要素のidを変更する文句を言いませんか？

Answer 1

ハンドラは、ドキュメントがロードされるときに要素に割り当てられるため、要素がないためbyeに割り当てられたハンドラはありません。 （。それはに適用することができ、いくつかの祖先があるかどう.delegate()が優れていることに注意してください）：

例：http://jsfiddle.net/patrick_dw/Pwa5Q/2/

$("#hello").live('click',function(){ 
    $(this).attr("id","bye").text("bye"); 
}); 

$("#bye").live('click',function(){ 
    $(this).attr("id","hello").text("hello"); 
}); 

をそれとも要素にハンドラを割り当てる

あなたは.live()を使用することができますhelloで置き換え、同じハンドラを使用してIDを切り替えます。

例：http://jsfiddle.net/patrick_dw/Pwa5Q/

$("#hello").click(function(){ 
    var newID = this.id === 'hello' ? 'bye' : 'hello'; 
    $(this).attr("id",newID).text(newID); 
}); 

Answer 2

のdivのidはDOMに「さようなら」に設定される前に「さようなら」のクリックイベントハンドラをバインドされているので、それは動作しません。 live()を使用してこれを回避することができます。

$("#hello").live('click', function(){ 
    $(this).attr("id","bye").text("bye"); 
}); 

$("#bye").live('click', function(){ 
    $(this).attr("id","hello").text("hello"); 
});