.load()로로드 된 데이터에 jQuery 스크립트 사용

Question

jQuery를 사용하여 웹 페이지를 재생하고 있습니다.

두 개의 애니메이션이 있고 일부 .post 작업이 있고 div가 .load() 페이지가 5 초마다 있습니다.

많은 데이터베이스 항목이 나열된 .load() 데이터에는 각 항목 옆에 삭제 버튼이 있습니다.

게시물 호출로 항목을 삭제하기 위해 jQuery와 함께 버튼을 사용하고 싶지만 문제는 jQuery가 .load()를 통해 호출 된 html에서 작동하지 않는다는 것입니다.

일부 사람들은 ".on"을 사용하지만 내 목표를 달성하는 데 사용 방법을 찾을 수없는 것을 보았습니다. 몇 가지 통찰력을 사람들/소녀들이 많이 평가할 것입니다.

HTML :

<div id="load_data"> 

</div> 

jQuery를 : 여기에

내가 무슨의 예입니다이 예제

$(document).load(function(){ 

    $("#load_data").load('test.html'); 

    $("#change_loaded").click(function(){ 

     $("#loaded").empty().append('Now the data is updated.'); 
    }) 

}) 

test.html를

<button id="change_loaded">Click</button> 

<div id="loaded"> 

This is what I want to change with the jQuery but it isn't working 

</div> 

때 나는 change_loaded를 클릭한다. 버튼을 클릭하면 jQuery가 아직로드되지 않았기 때문에 아무 것도하지 않습니다. 내가 알고 싶은 것은 .load()를 사용하여 div 안에 넣어 진 html을위한 jQuery 코드를로드하는 올바른 방법이다.

감사합니다.

Answer 1

당신은 이벤트 리스너 때 DOM로드를 결합하고 있기 때문에 이것에 대한 이유는 동적 콘텐츠

$(document).ready(function(){ 
    $("#load_data").load('test.html'); 
    $("#load_data").on('click', '#change_loaded', function(){ 
      $("#loaded").empty().append('Now the data is updated.'); 
    }); 
}); 

Answer 2

에 대한 위임 된 이벤트 처리기가 필요합니다. 동적 내용을 삽입하면 이벤트 리스너가 연결되지 않습니다. .on을 사용하면 동적 컨텐트의 부모 인 정적 DOM 요소에 수신기를 위임하므로 자식의 모든 이벤트가 연결된 이벤트가있는 부모까지 버블됩니다.