위임 된 이벤트를 유지하면서 저장된 jQuery 객체 복사

Question

사용자가 행을 추가 및 삭제할 수있는 동적 테이블이 있습니다. 사용자가 행을 추가하기 위해 버튼을 클릭하면 초기 테이블 행 .baseRow의 복사본 인 저장된 jQuery 객체를 DOM에 삽입하려고합니다. 이 행에는 향후 추가 된 행에 대해 살아있는 상태로 유지되는 위임 된 클릭 이벤트가 있어야합니다.

그러나 현재 구현중인 두 가지 문제 (Chrome/IE에서 테스트 됨)가 있습니다. 첫 번째는 첫 번째 이벤트가 발생한 후 클릭 핸들러가 중단된다는 것입니다. 나는 이후에 .html()을 묶어서이 문제를 해결할 수 있었지만, 복제본을 이해할 수 없게 부모 요소 인 tr 요소를 제거하고 자식 요소로만 줄였습니다. ,

JS

$('document').ready(function(){ 
    var $baseRow = $('.baseRow').clone(true,true); 
    $('table').delegate('.addRow','click',function(){ 
     $('tbody').append($baseRow); 
    }); 
});​ 

HTML

<table> 
    <thead> 
     <tr> 
      <th>Add Row</th> 
      <th>Header 1</th> 
      <th>Header 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="baseRow"> 
      <td class="addRow">+</td> 
      <td>Body 1</td> 
      <td>Body 2</td> 
     </tr> 
    </tbody> 
</table> 

당신은 한 번 복제

Answer 1

:

는, 또는 코드의 샘플은 아래의 문제의 예를 들어 this js fiddle를 참조하십시오 그 복제 된 요소를 반복해서 추가하십시오. 단 하나의 복제본이 있기 때문에 두 개 이상의 요소 (원래 + 복제본)를 가질 수는 없습니다. 대신 클론의 양이 클릭 수 : http://jsfiddle.net/YxB9J/5/과 같도록 클릭하면 클론됩니다.

$(document).ready(function(){ 
    var $baseRow = $('.baseRow'); 
    $('table').delegate('.addRow','click',function(){ 
     $('tbody').append($baseRow.clone(true, true)); 
    }); 
});