javascript - 用于动态生成的 HTML 元素的 jQuery 选择器？

Question

在我的页面中，我使用这段代码来生成HTML：

$.ajax({
        url: '...'
}).done(function (model) {
    for (var i = 1; i <= model.numberOfPages; i++) {
        html += '<a class="page_number" href="javascript:void(0);">'+i+'</a>&nbsp;';
    }
    $(".page_numbers").html(html);
});

但是当我尝试在这些 a 标签上添加点击事件时，什么也没有发生。我哪里做错了？

$(document).ready(function (event) {
    $('.page_number').click(function (event) {
        //Some code here
    });
});

Answer 1

将元素添加到页面后，您必须绑定事件。

或者您可以使用委托，然后将其绑定到父元素并指定它适用于哪些子元素：

$('.page_numbers').on("click", ".page_number", function (event) {
  //some code here
});

对于 jQuery 1.4.2 到 1.6.x，您使用delegate方法而不是on方法：

$('.page_numbers').delegate(".page_number", "click", function (event) {
  //some code here
});

Answer 2

从 jQuery 1.7 开始，这是将事件绑定到动态创建的对象的方式

$(document).ready(function (event)
{
    $(document).on("click", ".page_number", function(e)
    {
       //some code here
    });
});

API 文档：http ://api.jquery.com/on/