새로 삽입 된 HTML에 jquery 이벤트 핸들러를 첨부하는 방법은 무엇입니까?

Question

HTML이 아직 생성되지 않은 경우 어떻게하면 .on()을 사용할 수 있습니까? jQuery 페이지에

이라고 표시됩니다. 새 HTML이 페이지에 삽입되는 경우, 새 HTML이 페이지에 배치 된 후 요소를 선택하고 이벤트 핸들러를 연결하십시오.

하지만 어떻게해야할지 모르겠습니다. 이벤트 처리기를 "다시로드"할 수 있습니까?

내가

generatePage()가 .test로 된 div의 무리를 생성

$(document).ready(function(){ 
    $('.test').on('click', function(){ 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 
generatePage(); 
}); 

, 어떻게 내가 .on()를 리 바인드 것이다했다 그렇다면?

나는 비슷한 질문을하고 있지만 빠른 검색 후에 내가 찾고있는 것을 찾지 못했다는 것을 알고 있습니다.

Answer 1

아래 예와 같이 .on을 사용하십시오. body 태그를 항상 사용할 수 있다고 가정 할 수 있으므로 본문에 이벤트 핸들러를 연결하고이 경우 .test과 같이 이벤트를 선택기에 위임하는 것이 안전합니다.

$(document).ready(function(){ 
    $('body').on('click', '.test', function(){ // Make your changes here 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 

    generatePage(); 
}); 

또는 경우

generatePage() 또한 HTML, 머리와 몸 태그 당신의 선택으로 문서을 사용하여 생성된다.

선택기가 제공된다

은, 이벤트 핸들러는 : 다음 선택기 설명한다

.on(events [, selector] [, data], handler(eventObject)) 

포함하여 다음 jquery documentation CSTE 연구진에 따르면

는

$(document).ready(function(){ 
    $(document).on('click', '.test', function(){ // Make your changes here 
     var id = $(this).attr('id'); 
     console.log("clicked" + id); 
    }); 

    generatePage(); 
}); 

다음 매개 변수를 사용할 위임이라고도합니다. 이벤트가 바운딩 요소 에서 직접 발생하지만 이 선택 자와 일치하는 하위 항목 (내부 요소)에 대해서만 처리기가 호출되면 처리기가 호출되지 않습니다. jQuery는 이벤트 대상에서 까지 이벤트를 처리기가 연결된 요소 (즉 가장 바깥 쪽 요소 인 의 가장 안쪽)에 연결하고 셀렉터와 일치하는 경로에있는 경로를 따라 처리기를 실행합니다.