Q:

Ajax function doesn't work with dynamic div

My function for onclick is:
$(document).ready(function() {
    $('.mydata').click(function() {
        alert($(this).attr('data'));
    });
});​

A static element will work:
<div><span id='moreinfo' class='mydata' data="25">Click Me!</span></div>
<div><span id='moreinfo' class='mydata' data="250">Click Me Too!</span></div>

But a div pair populated with the same elements dynamically will not fire off the function.  What am I doing wrong?
Code example at: http://jsfiddle.net/KubXr/

A:

you need event delegation:
$(function(){
  $(document).on('click', '.mydata', function() {
    alert($(this).attr('data'));
  });
});

this means that, any element, existing or future, dynamically added, will have the event triggered if contains the mydata class. 

