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);
});

但是当我尝试在这些标签上添加点击事件时，没有任何反应。我哪里出错了？

$(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 method而不是on method：

$('.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/

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

2 个答案: