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

Question

여러 줄의 입력을 포함하는 양식 요소가 있습니다.각 줄을 웹 응용 프로그램에서 만들려는 새 개체의 속성으로 생각하십시오.그리고 하나의 HTTP POST에서 여러 개의 새 개체를 만들 수 있기를 원합니다.Javascript의 기본 제공 cloneNode (true) 메서드를 사용하여 각 줄을 복제하고 있습니다.문제는 각 입력 줄에 onclick-event에 연결된 제거 링크가 있다는 것입니다. 라코 디스

복제 된 입력 줄의 제거 링크를 클릭하면 동일한 dom 개체에서 복제 된 모든 입력 줄도 제거됩니다.위의 DOM 요소에서 cloneNode (true)를 사용한 후 "this"객체를 적절한 앵커 태그로 리 바인딩 할 수 있습니까?

Answer 1

각 링크에 핸들러를 두지 마십시오 (실제로 버튼이어야 함, BTW). 이벤트 버블 링 을 사용하여 하나의 핸들러로 모든 버튼을 처리합니다. 라코 디스

+ 라코 디스

Answer 2

innerHTML 방법 또는 혼합을 사용하여 복제를 시도 할 수 있습니다. 라코 디스

또한 cloneNode는 addEventListener에 등록 된 이벤트를 복제하지 않는다고 생각합니다.그러나 IE의 attachEvent 이벤트는 복제 됩니다.하지만 제가 틀렸을 수도 있습니다.

Answer 3

IE7과 FF3에서 테스트했는데 예상대로 작동했습니다. 다른 작업이 진행 중이어야합니다.

다음은 내 테스트 스크립트입니다. 라코 디스

Answer 4

이 문제를 디버깅하기 위해 코드를 래핑하겠습니다. 라코 디스

함수 : 라코 디스

이렇게하면 $ (this)가 무엇을 반환하는지 알 수 있습니다.실제로 둘 이상의 객체 (여러 행)를 반환하는 경우 cloneNode를 사용하여 요소를 생성하는 코드에서 찾을 위치를 확실히 알고 있습니다.결과 요소를 수정합니까 (예 : id 속성 변경)?

설명하신 문제가 있다면 트리거 요소와 "line"요소에 고유 ID를 추가하는 것을 고려해 보겠습니다.

Answer 5

첫 번째 대답이 정답입니다.

Pornel은 가장 많은 브라우저 간 및 프레임 워크에 구애받지 않는 솔루션을 암시 적으로 제안합니다.

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

Answer 6

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

편집 : 죄송합니다. Prototype을 사용하고 계십니다.