AJAX 动态内容“事件委托”替换“每个”答案

【问题标题】：AJAX dyamic content "event delegation" replacement for "each"AJAX 动态内容“事件委托”替换“每个”
【发布时间】：2017-03-31 14:57:10
【问题描述】：

我正在网站上实现 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'));
});

【问题讨论】：

标签： javascript jquery ajax dynamic momentjs

【解决方案1】：

要执行您需要的操作，您的第一个块中的逻辑是正确的 - 您只需在将新的 <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
  }
})

【讨论】：

【解决方案2】：

您需要将您的侦听器重新添加到新添加的时间。
Jquery 在加载页面时设置它的侦听器一次，这就是为什么一旦加载它们就无法访问它们的原因。我建议使用一种方法来添加您的侦听器，并在成功回调结束时简单地调用该方法。

【讨论】：