jQuery: changer l'identifiant d'un div deux fois ne fonctionne pas

Question

J'ai essayé de basculer l'ID d'un div quand l'utilisateur clique dessus. cliquez d'abord fonctionne, et il change l'id divs, mais lorsque vous appuyez à nouveau il l'habitude de changer l'ID de div nouveau ....

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

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

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

Toute idée de la façon d'obtenir ce travail?

Answer 1

Le gestionnaire est affecté à l'élément lors du chargement du document. Par conséquent, aucun gestionnaire n'est affecté à bye puisqu'il n'y a aucun élément.

Vous pouvez utiliser .live() (notez que .delegate() est mieux s'il y a un ancêtre, il peut être appliqué.):

Exemple: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"); 
}); 

Ou tout simplement affecter le gestionnaire à l'élément avec hello et utilisez le même gestionnaire pour basculer l'ID.

Exemple:http://jsfiddle.net/patrick_dw/Pwa5Q/

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

Answer 2

Il ne fonctionne pas parce que gestionnaire d'événements de clic pour 'bye' est lié avant l'id div est réglé sur 'bye' dans DOM. Vous pouvez utiliser live() pour contourner ce problème:

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

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