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

你需要事件委托(delegate):

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

这意味着，如果包含 mydata 类，任何动态添加的元素，无论是现有的还是 future 的，都会触发事件。