0

我的页面中有这段 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>最初加载的条目。

如果我使用无休止的分页（如 google 图像样式或 twitter 样式），在一些 AJAX 操作（如按钮单击、滚动到底部等）之后加载更多条目，则这些新加载的条目将无法使用美元符号功能。

我该怎么做才能使其适用于所有<td>条目？

4

4 回答 4

0

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

  $('td').on('click', 'a', function(e) {
    ...
  });
于 2013-02-22T05:33:25.663 回答
0

这是一个明确的问题event delegation：

只需更改此行：

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

对此：

$(document).on('click', 'td a', function(e) {
于 2013-02-22T05:33:31.677 回答
0

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

一般形式是这样的：

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

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

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

jQuery .live() 与 .on() 方法在加载动态 html 后添加点击事件

如何在新添加的 DOM 上进行实时点击事件

jQuery .on 不起作用，但 .live对类似回答的问题起作用。

于 2013-02-22T05:33:38.707 回答
0

您需要执行以下代码

$(document).on('click', 'td a',function(e) {
    e.preventDefault()
    var href = $(this).attr('href');
    $.ajax({
        url: href,
        success: function() { 
          [...] // SKIPPED, DO STUFF HERE. 
        },
       }
    );
})
于 2013-02-22T05:29:31.607 回答