Ajax function doesn't work with dynamic div

Question

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/

Answer 1

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.