Chrome DOM没有为jQuery append/fadeIn更新

Question

从服务器获取新记录后,我使用jQuery 1.7.2的AJAX成功回调将新记录添加到列表中并淡入其中.

function onSuccess (data, status, xhr) {
    var record = $(template_html);

    // populate `record` with `data` values.

    body.append(record); // body is a jQuery object from closure scope
    record.fadeIn('fast');
}

我在以下浏览器中对此进行了测试:

• IE 8
• IE 9
• Safari 5.1.7
• Firefox 14.0.1
• Chrome 21.0.1180.79
• 歌剧11.64

除了Chrome之外,它始终适用于所有上述浏览器.它偶尔会在Chrome中运行.

如果在Chrome中失败,如果我单击"检查元素"或查看开发人员工具上的"元素"选项卡,或者单击使用的打印到Javascript控制台的DOM元素console.log(record),则会导致新记录进入可见性.

我知道正在创建,填充和追加DOM元素.问题是Chrome有时会拒绝重新呈现DOM.有时.

我试着更换fadeIn有show或fadeTo没有变化.

"类似问题"中的答案都没有对我有用.记录的标记只是<div>在<div>s中,我在添加新记录之前和之后验证了页面,以查看是否存在无效的HTML问题.

有什么想法或想法吗？

Answer 1

尝试这个：

$(document).ready(function () {
    var body = document.body;
    $(body).append(function () {
        return $('<div>').addClass('Appended').html('Test Div </br> :)');
    });

    setTimeout(function () {
        $('.Appended').fadeIn('fast');

        // i'm used timeout to see the effect
    }, 1500);
});

你可以通过这个小提琴链接检查它