모바일 웹 애플리케이션에서 사용할 일련의 사용자 지정 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.
.clone()받아 들여진 주장을 알지 못했습니다. FML. 당신의 도움을 주셔서 감사합니다.
.clone()합니다. .data()( data-xxxx="somedata"DOM의 데이터와 데이터 모두) 복제하지 않는 데 어려움을 겪고 있습니다.
click합니다. 새로운 복제 div를 추가 하기 위해 이벤트 를 만들어야했습니다 . ready작동하지 않는
.clone; 이는 jQuery의 이벤트 위임 논리이며 추가 선택기를.on.