javascript - Ajax関数は動的divでは機能しません

Question

onclickの私の関数は次のとおりです。

$(document).ready(function() {
    $('.mydata').click(function() {
        alert($(this).attr('data'));
    });
});​

静的要素は機能します：

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

ただし、同じ要素が動的に入力されたdivペアは、関数を起動しません。私は何が間違っているのですか？

コード例：http：//jsfiddle.net/KubXr/

Answer 1

イベントの委任が必要です：

$(function(){
  $(document).on('click', '.mydata', function() {
    alert($(this).attr('data'));
  });
});

つまり、動的に追加された既存または将来の要素には、mydataクラスが含まれている場合にイベントがトリガーされます。