$ .ajax()에서 가져온 DOM을 통해 요소에 액세스하려면 어떻게해야합니까?

Question

나는 $.ajax 통해 다른 페이지에서 일부 HTML을로드 :

<script type="text/javascript"> 
    $(function() { 
     $.ajax({ 
      url: '/getInfo', 
      context: $('#contentBox'), 
      success: function(data) { 
       $(this).html(data); 
      } 
     }); 
    }); 

    $(function() { 
     $('#clickableElement').click(function() { 
      alert("I work!"); 
     }); 
    }); 
</script> 

<div id="contentBox"></div> 

코드 하중이 HTML을 사업부로 ID contentBox로 : 나는 단락을 클릭하면

<p id="clickableElement">I'm clickable.</p> 

그러나,로드, 아니 경고 상자가 나타납니다. AJAX를 통해로드 된 요소에 대해서는 DOM에 올바르게 액세스하고 있다고 생각하지 않습니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+ 

on 버전 :

$('#contentBox').on('click', '#clickableElement', function() { 
    alert('I work!'); 
}); 

ondocs는 :

선택기가 제공된다

이벤트 핸들러 위임로 지칭된다. 이벤트가 바운드 요소에서 직접 발생하지만 선택기와 일치하는 하위 항목 (내부 요소)에 대해서만 발생하면 처리기가 호출되지 않습니다. jQuery는 이벤트 대상에서 이벤트 처리기가 연결된 요소 (즉, 가장 안쪽에서 가장 바깥 쪽 요소)까지 이벤트를 버블 링하고 선택기와 일치하는 해당 경로를 따라 핸들러를 실행합니다.

Answer 2

브라우저에서 스크립트를 실행할 때 id = clickableElement의 노드가 없으면 나중에 요소를 만들 수 있음을 표시해야합니다.

동적 DOM 노드에 액세스하려면 jQuery의 on() 함수를 사용해야합니다.