cloneNode (true)를 사용한 후 올바른 Javascript 이벤트를 유지하는 방법

Question

여러 줄의 입력을 포함하는 양식 요소가 있습니다. 각 줄을 웹 응용 프로그램에서 만들려는 새 개체의 특성으로 생각하십시오. 그리고 하나의 HTTP POST에서 여러 개의 새로운 객체를 만들 수 있기를 원합니다. Javascript에 내장 된 cloneNode (true) 메서드를 사용하여 각 행을 복제합니다.

복제 된 입력 라인의 제거 링크를 클릭

// prototype based 
<div class="input-line"> 
    <input .../> 
    <a href="#" onclick="$(this).up().remove();"> Remove </a> 
</div> 

, 그것은 또한에서 복제 된 모든 입력 라인을 제거 : 문제는 각 입력 라인은 또한 온 클릭 이벤트에 부착 된 제거 링크를 가지고 있다는 것입니다 같은 dom 객체. 위의 DOM 요소에서 cloneNode (true)를 사용한 후 적절한 앵커 태그에 "this"객체를 다시 바인딩 할 수 있습니까?

Answer 1

각 링크에 처리기를 두지 마십시오 (이 버튼은 BTW 여야 함). 하나의 핸들러 모든 버튼을 처리 할 수 ​​event bubbling를 사용

formObject.onclick = function(e) 
{ 
    e=e||event; // IE sucks 
    var target = e.target||e.srcElement; // and sucks again 

    // target is the element that has been clicked 
    if (target && target.className=='remove') 
    { 
     target.parentNode.parentNode.removeChild(target.parentNode); 
     return false; // stop event from bubbling elsewhere 
    } 
} 

+

<div> 
    <input…> 
    <button type=button class=remove>Remove without JS handler!</button> 
</div> 

Answer 2

jQuery를 사용하는 것 같습니다. 그것은 이벤트로 요소를 복제하는 방법이 있습니다 : http://docs.jquery.com/Manipulation/clone#true

EDIT : 죄송합니다. 프로토 타입을 사용하고 있습니다.

Answer 3

당신은 innerHTML을 방법, 또는 믹스를 사용하여 복제를 시도 할 수 : 또한

var newItem = $(item).cloneNode(false); 
newItem.innerHTML = $(item).innerHTML; 

: 나는 cloneNode가 또는 addEventListener 등록 이벤트를 복제하지 않습니다 생각합니다. 하지만 IE의 attachEvent 이벤트 은으로 복제되었습니다. 그러나 나는 틀릴지도 모른다.

Answer 4

IE7과 FF3에서이를 테스트했으며 예상대로 작동했습니다. 다른 작업이 있어야합니다.

가 여기 내 테스트 스크립트입니다 :

<div id="x"> 
    <div class="input-line" id="y"> 
     <input type="text"> 
     <a href="#" onclick="$(this).up().remove();"> Remove </a> 
    </div> 
</div> 

<script> 

$('x').appendChild($('y').cloneNode(true)); 
$('x').appendChild($('y').cloneNode(true)); 
$('x').appendChild($('y').cloneNode(true)); 

</script> 

Answer 5

이 문제를 디버깅하기 위해, 나는 함수에 코드

$(this).up().remove()

포장 것이다 : 이것은 당신이 찾을 수

function _debugRemoveInputLine(this) { 
    debugger; 
    $(this).up().remove(); 
}

$ (이)가 돌아오고있다. 실제로 하나 이상의 객체 (여러 행)를 반환하는 경우 cloneNode를 사용하여 요소를 만드는 코드에서 어디를 봐야하는지 확실히 알 수 있습니다. 결과 요소의 수정 (즉, id 속성 변경)을 수행합니까?

내가 설명하는 문제가 있다면 트리거하는 요소와 "line"요소에 고유 한 ID를 추가하는 것을 고려할 것입니다.

Answer 6

첫 번째 대답은 올바른 것입니다.

포넬 (Pornel)은 브라우저와 프레임을 가리지 않는 가장 큰 해결책을 암묵적으로 제안합니다.

테스트하지는 않았지만 개념은 이벤트와 관련된 이러한 동적 상황에서 작동합니다.