바운드 이벤트 핸들러를 유지하면서 jQuery로 두 div 바꾸기

Question

두 개의 div, #content 및 #contentSwap이 있습니다. #contentSwap에 데이터를로드하고 몇 가지 작업을 수행 한 다음 #content로 교체합니다. 저는 html() 함수를 사용하여 두 가지를 교환했지만이 문제가 발생했다는 것을 깨달았습니다. click()을 사용하여 #contentSwap에 앵커에 할당 한 함수가 손실되었습니다. 코드 예는 다음과 같습니다.

$('#contentSwap').html(data); 

$('#contentSwap a').each(function(){ 
$(this).click(function(){ 
    // Do whatever 
}); 
}); 

$('#content').html($('#contentSwap').html()); 
$('#contentSwap').html(""); 

이후에 #content에서 할당 된 기능이 작동하지 않습니다.

그러나 각 div의 id를 수정하는 데 attr() 함수를 사용하면 click() 함수가 계속 사용됩니다. 내가 효과적으로 #content 및 #contentSwap를 교환 할 수있는 방법

$('#content').attr("id", "contentSwap1"); 
$('#contentSwap').attr("id", "content"); 
$('#contentSwap1').attr("id", "contentSwap"); 
$('#contentSwap').html(""); 

:하지만이 모든 시간을 작동하고, #content 및 #contentSwap 등 다음의 여러 사본을 포함하여 버그의 모든 종류가 발생하지 않는 것은 그 코드입니다 내가 할당 한 click() 함수를 잃지 않고?

Answer 1

당신이 무엇을 하려는지 확실하지 않지만 #contentSwap에 할당 된 클릭 핸들러가 갑자기 #content에서 작동하지 않습니다.

하여 나중에 다른 뭔가에 대한 #contentSwap 요소를 사용하지 않는 경우, 당신은 단지 #content 내부의 전체 요소를 이동하고 있는지 작동하도록 위임 된 이벤트 핸들러를 사용할 수 있습니다, 뭔가 같은 :

$('#contentSwap').html(data); 

$('#contentSwap a').each(function(){ 
    $(document).on('click', this, function(){ 
     //document should be replace with nearest non dynamic parent 
     //do your thing 
    }); 
}); 

$('#content').empty().append($('#contentSwap')); 

Answer 2

입니다 이벤트 위임이라고합니다. 기본적으로 프로그램 적/동적으로 컨텐트를 생성하므로 기본 이벤트 바인딩이 더 이상 작동하지 않습니다. .live이되지 않습니다하지만 당신은 사용할 수 있습니다

$(#contentSwap a).on("click", function(){ 
    // Do whatever 
}); 

또한, 그 each 기능은 아무것도하지 않는 것 그리고 당신이 그것을 건너 뛸 수 있습니다 상당히 확신합니다.

Answer 3

나는 당신이 필요로하는 것은 생각 :

$('#contentSwap').contents().appendTo('#content'); 

참조 :http://jsfiddle.net/thirtydot/jHSwY/

.contents()#contentSwap의 (텍스트 노드를 포함하여) 모든 아이를 가져 오는 데 사용됩니다. 그런 다음 어린이는 #content 안에 .appendTo()을 사용하여 이동합니다 ("대상으로 옮길 것"이라는 문장 참조).

Answer 4

이 하나를 알아 냈습니다! 두 번째 코드 블록은 작동했지만 제공 한 #contentSwap div는 #content div와 같은 위치에 없었습니다. 나는 그것을 적당한 공간으로 옮겼고 모든 것이 훌륭해졌습니다.

http://www.tylergerard.com