클릭 처리기를 나중에 추가 된 콘텐츠에 연결하는 방법 - J 검색어

Question

나는 HTML과 비슷합니다.

<ul> 
    <li> 
     <a id="MP0003631" class="pheno" href="#">nervous system phenotype</a> 
    </li> 
<ul> 

클릭하면, JQuery와,이처럼 보이는 :

$(".pheno").on("click", function(){ 
var id = $(this).attr("id"); 

$.ajax({ 
    type: "POST", 
    url: "treescript.php", 
    data: { pheno: id} 
    }).done(function(msg) { 
    $('#'+id).after("<br>"+msg+""); 
    alert(id); 
    }); 

}); 

처럼 보이는 HTML이 생성됩니다 :

이 문제가

<ul> 
    <li> 
     <a id="MP0003631" class="pheno" href="#">nervous system phenotype</a> 
    <ul> 
     <li> 
      <a id="MP0003632" class="pheno" href="#">abnormal nervous system morphology</a> 
     </li> 
     <li> 
      <a id="MP0003633" class="pheno" href="#">abnormal nervous system physiology</a> 
     </li> 
    </ul> 
    </li> 
</ul> 

, 생성되는 내용, 수행을 JQuery에 의해 인식되지 않는다. 이것이 가능합니까?

Answer 1

위임 모드에서 jQuery의 on()을 사용하여 나중에 선택기와 일치하는 이후에 추가 된 모든 요소에 연결할 수 있습니다.

$("#dataTable tbody").on("click", "tr", function(event){ 
    alert($(this).text()); 
}); 

위 (상기 코드는 실행시에 존재해야한다) #dataTable tbody 동적으로 추가되는 임의 tr 일치한다.

또한 나중에 어디서든 문서에 추가되는 모든tr에 클릭 처리기를 추가하는 형태

$(document).on("click", "tr", function(event){ 
    alert($(this).text()); 
}); 

를 사용할 수 있습니다.