jQuery : div의 ID를 두 번 변경하면 변경됩니다.

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> 

어떤 아이디어 사업부의 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"); 
});