이벤트 위임 및 jQuery load()

Question

탐색 표시 줄에 탐색 항목을 동적으로로드하는 이벤트를 첨부하려고합니다. 로드 된 탐색 항목을 클릭하면 무언가 (경고 "hello world")가 수행됩니다. 나는 여기에 대한 답변이 이벤트 위임과 관련이 있다고 확신하지만, 나는 많은 것을 시도해 보았고 아직 정확히 파악하지 못했다.

<div id='myNav'> 
     <ul> 
      <li id='navItem1'>1</li> 
      <li id='navItem2'>2</li> 
      <li id='navItem3'>3</li> 
      <li id='navItem4'>4</li> 
     </ul> 
    </div> 

이 NAVBAR에로드 :

myNav로드 할

var loadURL = "index.html #myNav"; 
$("#navBar").load(loadURL).slideDown("medium"); 

이제 새로로드에 이벤트를 첨부 :

여기

<div id='navBar'> 
</div> 

그것을 실행하는 JS의 항목을 탐색하십시오 (이것은 내가 잘못하고있는 부분입니다) :

$('#navItem1').on("click", function(){ 
    alert("hello world!"); 
}); 

Answer 1

당신은이 경우 #navBar

$("#navBar").on("click", "#navItem1", function(){ 
    alert("hello world!"); 
}); 

또는로드에서 제공하는 콜백()를 첨부하여, on()의 위임 버전을 사용하고 동적으로 삽입되지 않은 요소에 위임해야합니다 요소가 실제로로드 된 경우 이벤트 핸들러

$("#navBar").load(loadURL, function() { 
    $('#navItem1').on("click", function(){ 
     alert("hello world!"); 
    }); 
}).slideDown("medium");