중첩 된 div를 클릭하면 div가 부모 ID를 반환합니다. 상위 ID를 사용하지 않고 하위 ID를 반환하려면 어떻게해야합니까?

Question

나는이 비슷한 코드를 가지고 :

<div id="content"> 
    <div id="child1"></div> 
    <div id="child2"></div> 
</div> 

로드 #content의 ID의 내용의 클릭 사업부의 아이들이 부모를 반환 할 때이

$('#child1').click(function(){ 
var page = "value1"; 

    $('#content').hide(); 
    $('#content').load('includes/'+ page +'.php', function() { 
     $('#content').fadeIn(speed); 
    }); 
    return false; 
}); 

그러나 jQuery를 클릭 이벤트를 사용하고 있습니다 신분증. 부모를 무시하면서 하위 ID를 선택하려면 어떻게해야합니까?

실제 HTML은 더 복잡하므로 페이지의 자식 값은 # content # child1이되지 않으므로 JS에서 #content를 무시하고 # child1을 볼 수있는 방법이 있습니까?

내가 사용하는 경우 "#의 자식 1"를 클릭하거나 "#content는"인 경우 값이 반환

$('div').click(function(){ 
    alert($(this).attr("id")); 
    return false; 
}); 

과 같은 코드.

Answer 1

내가 잘못 읽고있을 수도 있지만 #content의 내용을 완전히 덮어 썼습니다. 로드 명령이 완료되면 #child1 및 #child2 div가 더 이상 존재하지 않습니다.

로드 된 데이터에 #child1 div가 포함되어 있어도 원래 클릭 이벤트를 첨부 한 DOM 노드와 다릅니다. 그 이전 노드는 사라지고로드 된 데이터로 대체되며 이벤트 핸들러도 사라집니다. 부하가 #content 노드에서

사용 이벤트 위임을 완료 한 후

• 다시 바인드 이벤트 :

  이 삭제됩니다짜리 아이 노드 후 #child1.click() 이벤트를 듣고 유지하려면

  , 두 가지 옵션이 있습니다
  :

이벤트 위임은 하위 요소의 경우 이벤트 버블까지를 발사합니다 #content에 수신기를 결합 할 수 있습니다

$('#content').on('click', '#child1', function(evt) { 
    // event handler here 
    // this points to the element clicked ('#child1') 
}); 

이렇게하면 완전히 새로운 HTML로 노드를 교체 한 후에도 #child1 클릭 처리기가 효과적으로 유지됩니다.