program story

on ()에서도 이벤트 바인딩을 복제하지 않는 jQuery clone ()

inputbox 2020. 8. 28. 07:26
반응형

on ()에서도 이벤트 바인딩을 복제하지 않는 jQuery clone ()


모바일 웹 애플리케이션에서 사용할 일련의 사용자 지정 jQuery 이벤트를 만들었습니다. 그들은 훌륭하게 작동하고 테스트되었습니다. 그러나 나는 이해하기 어려운 작은 문제에 부딪쳤다.

.clone()버튼이 포함 된 DOM 내의 몇 가지 요소를 사용 하고 있습니다. 버튼에는 일부 사용자 지정 이벤트가 바인딩되어 있지만 (이벤트는를 사용하여 바인딩됩니다 .on()). 불행히도 jQuery의를 사용할 때 .clone()바인딩이 유지되지 않으므로 다시 추가해야합니다.

누군가 전에 이것을 만난 적이 있습니까? 누군가가 잠재적 인 해결 방법을 알고 있습니까? 을 사용 .on()하면 현재 또는 미래에 존재하는 요소에 대한 바인딩을 보존해야 한다고 생각했습니다 .


.clone () 메서드 의이 오버로드를 사용해야한다고 생각합니다 .

$element.clone(true, true);

clone ([withDataAndEvents] [, deepWithDataAndEvents])

withDataAndEvents : 이벤트 핸들러 및 데이터를 요소와 함께 복사해야하는지 여부를 나타내는 부울입니다. 기본값은 false입니다.

deepWithDataAndEvents : 복제 된 요소의 모든 자식에 대한 이벤트 핸들러 및 데이터를 복사해야하는지 여부를 나타내는 부울입니다. 기본적으로 해당 값은 첫 번째 인수의 값 (기본값은 false)과 일치합니다.


그주의 .on()실제로 바인드 대상으로하지만, 당신이 위임하는 요소에 이벤트 않습니다. 따라서 다음이있는 경우 :

$('#container').on('click', '.button', ...);

이벤트는 실제로에 바인딩됩니다 #container. .button요소 에 대한 클릭이 발생하면 해당 #container요소로 버블 링됩니다 . 이벤트를 트리거 한 요소는의 선택자 매개 변수에 따라 평가되며 .on()일치하면 이벤트 핸들러가 실행됩니다. 이것이 이벤트 위임이 작동하는 방식입니다.

#container 요소를 복제하는 경우 .on()보존 할로 작성된 바인딩에 대한 이벤트 및 데이터로 깊은 복제를 수행 해야합니다.

.on()의 부모에서 사용 하는 경우에는 필요하지 않습니다 #container.


1.5 jQuery 버전에 딥 클로닝 기능이 추가되었다는 사실을 알고 있어야합니다.

이 주제에 대한 추가 정보 :

http://api.jquery.com/clone/

참고 URL : https://stackoverflow.com/questions/9549643/jquery-clone-not-cloning-event-bindings-even-with-on

반응형