JQuery .on() - 동적 내용 복제

Question

사용자가 일부 라이브 검색 기능을 수행 할 수있는 프로젝트를 진행 중입니다. 라이브 검색의 결과가 JQuery Ajax를 통해 표시 될 때 사용자는 표시된 결과 중 하나를 클릭하여 페이지의 다른 위치에서 복제본을 만들 수 있어야합니다. 내가 발견 한 문제는 새로운 라이브 검색 결과가 첫 페이지로드에서 처리되지 않았기 때문에 DOM에 존재하지 않는 '팬텀 코드'로 간주됩니다. 나는 JQuery의 on()과 bind() 함수에 대한 연구를 해왔지만 어떻게하면 그것을 내 자신의 상황에 어떻게 구현할 수 있을지 확신하지 못했다.

여기에 그 조각에서 내 JQuery와

$(".add").click(function() { 
     $(this).parent("li").clone(true).appendTo(".doc_list:first");      

}); 

(이) 동적 라이브 검색 결과를 통해 생성 된 LI 요소 (부모)의 내부에 존재하는 내 버튼을 의미합니다. 해당 LI 요소를 복사해야합니다.

더 많은 코드가 필요하면 알려 주시기 바랍니다.

Answer 1

페이지로드 후 DOM에 .add 버튼이 추가됨 ie. 동적으로, 그래서 당신은 델리게이트 이벤트 핸들러 (일명 라이브)가 필요합니다.

$(".doc_list").on('click', '.add', function() { 
    $(this).parent("li").clone(true).appendTo(".doc_list:first"); 
}); 

여기서 사용자 I .doc_list 컨테이너로

하지만 .doc_list 경우에도 동적 요소는 페이지로드에 DOM에 속하는 다른 정적 요소로 대체. Static-container 모든 동적 .add 요소를 추가 보유하고있는 가장 가까운 요소에 대한 선택이다

Answer 2

$("Static-container").on('click', '.add', function() { 
     $(this).parent("li").clone(true).appendTo(".doc_list:first");      
}); 

.