jQuery를 "replaceWith은"

Question

코드 "의"내부 작동하지 않습니다 http://jsfiddle.net/z1ot7c2g/12/

var DomTreeCopyWithRows = $(".crops #tiles").clone(true, true); 

    $(document).on("click", ".mod", function(){ 
     //if there is any other opened, restore original DOM order 
     $('.crops #tiles').replaceWith(DomTreeCopyWithRows); 

     $this = $(this); 
     //detect which tile's clicked 
     var clickedModClass = "." + $this.children(".content").attr("class").split(' ')[1]; 

     //move content to after the nearest row wrapper 
     $(clickedModClass).closest(".row").after($(clickedModClass)); 
     //open 
     $(clickedModClass).addClass("opened").show(); 
     $(clickedModClass).animate({ 
      height : $(clickedModClass)[0].scrollHeight 
     },"slow"); 

     return false; 
    }); 

나는 모듈의 행 아래에 열 확장 패널을 클릭에와 반응 타일 그리드가 있습니다. 화면에 따라 행은 1, 2, 3 또는 비행 중에 추가 된 .row wrapper 내부의 더 많은 모듈 일 수 있습니다.
클릭하면 클릭 모듈의 내용이 .mod에서 추출되어 .row 다음에 똑바로 붙습니다.
한 번에 하나만 열 수 있습니다. 문제점 : 두 번째로 클릭하면 이미 열려있는 다른 모듈의 내용을 닫고 다른 .mod 안에 다시 넣습니다. 이전에 저장 한 DOM 구조를 넣기 위해 $('.crops #tiles').replaceWith(DomTreeCopyWithRows)을 사용합니다.

문제 :

$('.crops #tiles').replaceWith(DomTreeCopyWithRows) doesn't work. 

는 아직도 여러 열 용기를 얻을.

DOM 대체품은 $(".crops #tiles").click이지만 DOM 교체 후 내 클릭 이벤트 첨부 파일을 유지할 수 없습니다.

의견을 보내 주셔서 감사합니다.

Answer 1

가 작동하지 않는 이유는 당신이 당신의 DomTreeCopyWithRows에 의해 참조 replaceWith 번 노드를 완료 한 후에는 DOM에있는 것들, 그래서 그들은 수정받을 사람이야 있다는 것입니다. 클릭이 발생할 때마다 그렇게하므로 처음으로 사본을 DOM에 저장하고 거기에 계속 남아서 후속 코드에 의해 수정됩니다.

$('.crops #tiles').replaceWith(DomTreeCopyWithRows.clone(true, true)); 
// -----------------------------------------------^^^^^^^^^^^^^^^^^^ 

Updated Fiddle