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

Javascript jQuery:使美元函数适用于在一些AJAX操作之后加载的元素,javascript,ajax,jquery,Javascript,Ajax,Jquery,我的页面中有这段jQuery代码,它基本上根据服务器响应对表中的进行了一些处理 $('document').ready(function() { $('td a').click(function(e) { e.preventDefault() var href = $(this).attr('href'); $.ajax({ url: href, success: function() {

我的页面中有这段jQuery代码,它基本上根据服务器响应对表中的
进行了一些处理

 $('document').ready(function() { 
    $('td a').click(function(e) {
        e.preventDefault()
        var href = $(this).attr('href');
        $.ajax({
            url: href,
            success: function() { 
              [...] // SKIPPED, DO STUFF HERE. 
            },
           }
        );
    })
 })
它工作得很好。。。。除了一个问题。它只对最初加载的
条目起作用

如果我使用无休止的分页方式(如google images样式或twitter样式),在一些AJAX操作(如单击按钮、滚动到底部等)后加载更多条目,那么新加载的条目将无法与美元符号功能一起使用


如何使其与所有
条目一起工作

您需要执行以下代码

$(document).on('click', 'td a',function(e) {
    e.preventDefault()
    var href = $(this).attr('href');
    $.ajax({
        url: href,
        success: function() { 
          [...] // SKIPPED, DO STUFF HERE. 
        },
       }
    );
})
使用
.on()
方法,该方法也将绑定将来的元素:

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

这是
事件委派的明确问题

只需更改这一行:

 $('td a').click(function(e) {
为此:

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

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

一般形式如下:

$(static parent selector).on("click", "td a", function(e) {});
静态父选择器应该是动态添加的元素的父元素,这些元素本身不是动态的,并且在运行初始jQuery时存在。它应该尽可能接近动态元素以获得最佳性能。在这种情况下,只要在运行初始jQuery代码时表DOM对象已经存在,它就很容易成为表本身

请参见以下类似回答的问题:

对于回答类似的问题。

她必须使用jQuery的“on”API