Php 通过AJAX更改动态添加元素的内容，而无需重新加载

我目前正在建立一个推特帖子的实时提要。我成功地以10秒的间隔拉入新的推文，新的推文立即弹出

但是，我正在显示创建推文后的时间，例如“24秒前”或“1天前”，并且希望在不重新加载页面的情况下实时更新这些值。但是，我不想使用10秒的其他间隔，而是1秒的新间隔来显示第一秒的更改

我创建了一个可以正确更新时间的函数，但是对于AJAX调用添加的新元素，它不起作用。要呈现一些代码：

HTML其实并不重要，重要的部分是“时间差”类的跨度，它包含“2秒”或“3天”，应该动态更改

<div class="row tweet-wrapper" data-crdate="' . $tw_timestamp . '">
<div class="col-xs-1 user-profile-picture">
    <img class="img-responsive" src="' . $user_profile_pic . '">
</div>
<div class="col-xs-11 tweet-content">
    <p class="tweet-header">
        <a href="https://twitter.com/' . $user_screen_name . '">' . $user_screen_name . '</a>

        <span class="tweet-header-sub">' . $user_name . '</span>
    </p>
    <p class="tweet-content">
        ' . $tw_text . '
    </p>
    ' . (!empty($images) ? '
    <p>
        ' . $images . '
    </p>
    ' : '') . '
    <p class="tweet-footer">
        <span class="tweet-footer-time">
            <a href="https://twitter.com/' . $tw_gen_screen . '/statuses/' . $tw_gen_tw_id . '">
                <img height="15" width="15" src="res/img/twitter-logo.svg"> 
                <span class="time-difference">' . $difference_show . ' ' . $difference_word . '</span> ago
            </a>
        </span>
    </p>
</div>
</div>

除了调用函数的间隔之外，在任何$（function（）{}）调用之外

Update.php（服务于ajax） 基本上做了很多事情来格式化tweet，通过比较时间戳过滤掉已经存在的tweet，然后返回一个与上面完全相同的div容器

我不能设置小提琴，因为我不想透露我的生产推特api的秘密，但我认为这应该是可以理解的没有

对于类似的问题，我已经看到了不同的答案（更新时间间隔、重新声明功能等等），但这些似乎对我都不起作用，因为现有（页面加载）推文的时间在实时更新，但通过Ajax新添加的推文根本没有改变

我构建了一个代码笔，它可以做几乎相同的事情，添加内容，但不使用AJAX，它可以工作：

显然，ajax给我带来了麻烦，但我不知道如何解决这个问题

编辑： 函数更改时间值：

var reloadTweetTimes = function() {
$.each(findElement, function() {
    var crdate      = $(this).data('crdate');
    var nowts       = parseInt($.now() / 1000);
    var difference  = nowts - crdate;

    var difference_word = '';
    var difference_show = '';

    if(difference == 1) {
        difference_word = 'second';
        difference_show = difference;
    } 
    else if(difference < 60) {
        difference_word = 'seconds';
        difference_show = difference;
    } 
    else if(difference >= 60 && difference < (60 * 2)) {
        difference_word = 'minute';
        difference_show = parseInt((difference / 60));
    }
    else if(difference < (60 * 60)) {
        difference_word = 'minutes';
        difference_show = parseInt((difference / 60));
    }
    else if(difference >= (60 * 60) && difference < (60 * 60 * 2)) {
        difference_word = 'hour';
        difference_show = parseInt((difference / 60 / 60));
    }
    else if(difference < (60 * 60 * 24)) {
        difference_word = 'hours';
        difference_show = parseInt((difference / 60 / 60));
    }
    else if(difference >= (60 * 60 * 24) && difference < (60 * 60 * 24 * 2)) {
        difference_word = 'day';
        difference_show = parseInt((difference / 60 / 60 / 24));
    }
    else {
        difference_word = 'days';
        difference_show = parseInt((difference / 60 / 60 / 24));
    }

    $(this).find('.time-difference').text(difference_show + ' ' + difference_word);

    $('.tweet-wrapper').css('opacity', 1);
});
};

---

在ajax调用的success方法中添加更新时差代码。由于如果在ajax调用后进行更新，DOM将不可用，因为$.get（）将创建一个新线程

$.get('res/php/update.php', { latest: latestTweet }, function(data) {
if(data && data != '') {
    $('.container-fluid').prepend(data);
    // Add here the time difference calculation function.
    window.scrollTo(0, 0);
}
}, 'html');
};

---

我仍然有点不清楚reloadTweetTimes在迭代什么元素，因为您没有findElement的定义。但我怀疑问题在于findElement是jQuery对象，仅绑定到文档加载时出现的元素。如果这是真的，您有两个选择：

在使用ajax和Windows加载新元素后，将它们添加到findElement中 将它们添加到文档中

每次重新加载TweetTimes运行时搜索新项目。（如果页面加载的元素太多，速度可能会变慢）

---

如果您想添加findElement的设置方式，我可以为两者提供代码示例。

更新时差内容的代码在哪里？我编辑了底部的主要帖子，很抱歉遗漏了这一点！我尝试重新定义间隔，并尝试更新时间本身，但不幸的是，这两种方法都不起作用。$.get（）的完整函数始终可以访问DOM。@Dave我提到的是，如果DOM操纵函数是在$.get（）函数（在Success/done回调之外）之外定义的，那么由$.get（）添加的DOM功能将不可用<调用get*/$.get（url、数据、函数（响应）{//Success callback}）之前的代码>/*；/*在调用get-where之后，$.get（）操作的DOM在这里将不可用，除非它在此行执行之前完成执行*/

var reloadTweetTimes = function() {
$.each(findElement, function() {
    var crdate      = $(this).data('crdate');
    var nowts       = parseInt($.now() / 1000);
    var difference  = nowts - crdate;

    var difference_word = '';
    var difference_show = '';

    if(difference == 1) {
        difference_word = 'second';
        difference_show = difference;
    } 
    else if(difference < 60) {
        difference_word = 'seconds';
        difference_show = difference;
    } 
    else if(difference >= 60 && difference < (60 * 2)) {
        difference_word = 'minute';
        difference_show = parseInt((difference / 60));
    }
    else if(difference < (60 * 60)) {
        difference_word = 'minutes';
        difference_show = parseInt((difference / 60));
    }
    else if(difference >= (60 * 60) && difference < (60 * 60 * 2)) {
        difference_word = 'hour';
        difference_show = parseInt((difference / 60 / 60));
    }
    else if(difference < (60 * 60 * 24)) {
        difference_word = 'hours';
        difference_show = parseInt((difference / 60 / 60));
    }
    else if(difference >= (60 * 60 * 24) && difference < (60 * 60 * 24 * 2)) {
        difference_word = 'day';
        difference_show = parseInt((difference / 60 / 60 / 24));
    }
    else {
        difference_word = 'days';
        difference_show = parseInt((difference / 60 / 60 / 24));
    }

    $(this).find('.time-difference').text(difference_show + ' ' + difference_word);

    $('.tweet-wrapper').css('opacity', 1);
});
};

var intervalRefreshTimes = setInterval(function() {
    reloadTweetTimes();
}, 1000 * refreshTimesInterval);

$.get('res/php/update.php', { latest: latestTweet }, function(data) {
if(data && data != '') {
    $('.container-fluid').prepend(data);
    // Add here the time difference calculation function.
    window.scrollTo(0, 0);
}
}, 'html');
};