Question

我正在实施AJAX＆＃34;加载更多＆＃34;在网站上分页。

为了让.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

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

Answer 2

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

AJAX动态内容＆＃34;事件授权＆＃34;替换＆＃34;每个＆＃34;

2 个答案: