JQuery와 : 자식 요소에서 가져 오기 데이터

Question

마크 업 :

<ul> 
<li><a href="#" class="item-list" data-id="1">Link 1</a></li> 
<li><a href="#" class="item-list" data-id="2">Link 2</a></li> 
<li><a href="#" class="item-list" data-id="3">Link 3</a></li> 
</ul> 

JQuery와에, 내가 링크 1을 선택 것하고 링크 1의 데이터 ID를 가져올 수 있어야합니다. 시도 :

$('.item-list').click(function(){ 
var link = $(this); 
alert($(this).data('id')); 
}); 

결과가 없습니다.

오. 페이지가로드 된 후 목록이 생성됩니다. DB를 쿼리하여 목록을 가져옵니다. 또한 사용자가 dB를 필터링하는 방법에 따라 목록을 변경할 수도 있습니다.

감사합니다.

Answer 1

페이지가로드 된 후 목록이 생성되면 .click 바인딩이 작동하지 않을 수 있습니다. 어쩌면 당신과 같이, .live을 시도 할 수 있습니다 :

$('.item-list').live('click', function(){ 
    var link = $(this); 
    alert($(this).data('id')); 
}); 

편집 :

내가 항상 jQuery를 1.7로 :) 잊지하는 것, .live()이되지 않습니다. 당신과 같이 .on()을 사용해야합니다

$("body").on("click",".item-list",function(){ 
    var link = $(this); 
    alert($(this).data('id')); 
}); 

Answer 2

사용 CSTE 연구진은 라이브가되지도 document.ready()

$(function(){ //short form of document.ready   
    $("body").on("click",".item-list",function(){ 
     var link = $(this); 
     alert($(this).data('id')); 
    }); 
}); 

Answer 3

$('ul').on('click', '.item-list', function() { 
    var link = $(this); 
    alert(link.attr('data-id')); 
}); 

내부에 코드를 삽입하기 때문에 그 JQuery와 1.7 이후