Question

我的页面中有这段jQuery代码，它基本上根据服务器响应对表中的<td>执行了一些操作。

 $('document').ready(function() { 
    $('td a').click(function(e) {
        e.preventDefault()
        var href = $(this).attr('href');
        $.ajax({
            url: href,
            success: function() { 
              [...] // SKIPPED, DO STUFF HERE. 
            },
           }
        );
    })
 })

效果很好....除了一个问题。它只适用于最初加载的<td>条目。

如果我使用无尽的分页（如谷歌图片风格或推特风格），在一些AJAX操作（例如按钮点击，滚动到底部等）之后加载更多条目，那些新加载的条目将不会使用美元符号功能。

如何使其适用于所有<td>条目？

Answer 1

您需要执行以下代码

$(document).on('click', 'td a',function(e) {
    e.preventDefault()
    var href = $(this).attr('href');
    $.ajax({
        url: href,
        success: function() { 
          [...] // SKIPPED, DO STUFF HERE. 
        },
       }
    );
})

Answer 2

使用.on()方法，它也将绑定未来的元素：

  $('td').on('click', 'a', function(e) {
    ...
  });

Answer 3

这是event delegation：

的明确问题

只需更改此行：

 $('td a').click(function(e) {

到此：

$(document).on('click', 'td a', function(e) {

Answer 4

您将需要使用.on()的动态形式，以便它可以使用委托事件处理来处理与您的选择器匹配的所有新创建元素的事件。

一般形式如下：

$(static parent selector).on("click", "td a", function(e) {});

静态父选择器应该是动态添加的元素的父级，这些元素本身不是动态的，并且在您运行初始jQuery时存在。它应尽可能接近动态元素以获得最佳性能。在这种情况下，只要表DOM对象在运行初始jQuery代码时已经存在，它就可以很容易地成为表本身。

请参阅这些回答相似的问题：

jQuery .live() vs .on() method for adding a click event after loading dynamic html

how to make live click event on new added DOM

jQuery .on does not work but .live does可以回答同样的问题。

jQuery：使美元函数适用于在某些AJAX操作之后加载的元素

4 个答案: