title: JQuery: Getting data from child elements
body: <p>Markup:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="#" class="item-list" data-id="1"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="item-list" data-id="2"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="item-list" data-id="3"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>In JQuery, i would select link 1 and it should be able to fetch the data-id of link1. I tried</p>
  
  <pre><code>$('.item-list').click(function(){
   var link = $(this);
   alert($(this).data('id'));
  });
  </code></pre>
  
  <p>It doesn't have any result. </p>
  
  <p>Oh. the list gets generated after the page is loaded. I am querying the DB to get the list. Also, it is also possible for the list to change, depending on how the user filters the dB.</p>
  
  <p>Thanks.</p>