Question

我有一个refresh()函数，设置为以这种方式定期调用：

setInterval("refresh()", duration);

在这个refresh()函数中，我动态地将内容添加到HTML表中。

所以我有这个简单的表格：

<table>
    <tbody>
        <tr><td>original title</td><td>original date</td></tr>
    </tbody>
</table>

这就成了这个新表：

<table>
    <tbody>
        <tr><td>new title</td><td>new date</td></tr>
        <tr><td>original title</td><td>original date</td></tr>
    </tbody>
</table>

通过此refresh()函数的操作：

function refresh() {
    var lastDate = $('.myTableClass > tbody > tr > td:nth-child(2)').first().text();

    $.get("./my_url.html?lastDate="+lastDate+, function (data) {
        if( data.trim().length > 0 ) {
            $(data).prependTo( $('.myTableClass > tbody') ).fadeIn('slow');
        }
    });
}

（my_url.html页面返回一条简单的<tr>....</tr>行。）

在第一次调用refresh()期间，一切正常，新内容成功地添加到我的表格中。

我的问题是，在第一次通话之后，当没有更多新内容要添加时，对refresh()的所有以下调用都会将相同的内容添加到我的表格中。

所以如果我让刷新被调用4次，我就会得到这个表：

<table>
    <tbody>
        <tr><td>new title</td><td>new date</td></tr>
        <tr><td>new title</td><td>new date</td></tr>
        <tr><td>new title</td><td>new date</td></tr>
        <tr><td>new title</td><td>new date</td></tr>
        <tr><td>original title</td><td>original date</td></tr>
    </tbody>
</table>

我发现发生这种情况是因为lastDate var永远不会使用新行的日期正确更新，它始终包含原始第一行的日期。

我在这里缺少什么？如何从我桌子的ajax-prepended第一<tr>行获取新日期？我选择table > tbody > tr ...与ajax加载的东西不兼容的方式是什么？

[编辑]如果它有价值，我使用的是jQuery 1.6.1。

Answer 1

您必须像这样更改刷新功能。

var lastDate = $('.myTableClass > tbody > tr > td:nth-child(2)').first().text();
function refresh() {
    $.get("./my_url.html?lastDate="+lastDate+, function (data) {
        if( data.trim().length > 0 ) {
           $(data).prependTo( $('.myTableClass > tbody') ).fadeIn('slow');
        }
    }).done(function(){
        lastDate = $('.myTableClass > tbody > tr:first > td:nth-child(2)').text();
   });
}

你需要使用done（）函数，在你的ajax请求完成后调用它并且它会给你最新的日期..

如何在ajax加载的内容上应用选择器

1 个答案: