JQuery: Getting data from child elements -

markup:

<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> 

in jquery, select link 1 , should able fetch data-id of link1. tried

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

it doesn't have result.

oh. list gets generated after page loaded. querying db list. also, possible list change, depending on how user filters db.

thanks.

if list generated after page loaded, .click binding might not work. maybe can try .live, so:

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

edit:

what seem forget :) of jquery 1.7, .live() deprecated. should use .on() so:

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