javascript - AJAX动态内容 "event delegation"替换为 "each"

Question

我正在网站上实现 AJAX“加载更多”分页。

为了使 .click() 事件适用于动态加载的内容，我将所有 .click() 代码替换为...

$(document).on('click', ".selector", function (event){

这对于可点击的内容来说一切正常。

现在我正在尝试让一些基于非点击的初始化代码也以相同的方式工作。这是我的代码的旧版本，适用于普通的非 AJAX 内容:

var now = moment();
$('time').each(function(i, e) {
    var time = moment($(e).attr('datetime'));
    $(e).html(time.from(now));
    $(e).attr('title', time.format('D MMM YYYY h:mma'));
});

如何让这段代码也能在动态加载的 <time> 上工作？标签？

我尝试了以下操作，但显然是错误的(使用此代码，所有 <time> 标签都不起作用):

var now = moment();
$(document).on('each', 'time', function (event){
    var time = moment($(e).attr('datetime'));
    $(e).html(time.from(now));
    $(e).attr('title', time.format('D MMM YYYY h:mma'));
});

Answer 1

要执行您需要的操作，第一个 block 中的逻辑是正确的 - 您只需要在新的 <time> 时再次执行它即可。元素已添加到 DOM 中。最简单的方法是将逻辑提取到函数中，如下所示:

function setTime($container) {
  $container = $container || $(document);
  var now = moment();
  $container.find('time').each(function(i, e) {
    var time = moment($(e).attr('datetime'));
    $(e).html(time.from(now));
    $(e).attr('title', time.format('D MMM YYYY h:mma'));
  });
}

setTime(); // on load

$.ajax({
  url: '/foo',
  success: function(html) {
    var $container = $('.container').append(html);
    setTime($container); // after the AJAX call
  }
})