Chrome DOM 未针对 jQuery 追加/淡入更新

Posted

技术标签:

【中文标题】Chrome DOM 未针对 jQuery 追加/淡入更新【英文标题】:Chrome DOM not updating for jQuery append/fadeIn 【发布时间】:2012-08-14 01:51:24 【问题描述】:

从服务器获取新记录后,我使用 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 火狐14.0.1 Chrome 21.0.1180.79 Opera 11.64

它在上述所有浏览器中均能正常运行,Chrome 除外。它偶尔会在 Chrome 中运行。

当它在 Chrome 中失败时,如果我单击“检查元素”或查看开发人员工具上的元素选项卡,或单击使用 console.log(record) 打印到 javascript 控制台的 DOM 元素,则会导致新记录突然出现。

我知道 DOM 元素正在正确创建、填充和附加。问题是有时 Chrome 拒绝重新渲染 DOM。有时。

我尝试将fadeIn 替换为showfadeTo,没有任何变化。

“类似问题”中的所有答案都对我无效。记录的标记只是 <div>s 中的 <div>s,我在添加新记录之前和之后验证了页面,看看是否可能是无效的 HTML 问题。

有什么想法或想法吗?

【问题讨论】:

对此我不确定,但我不得不问:你没有父div的溢出隐藏css属性吗? 【参考方案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);
);

你可以通过这个小提琴link查看它

【讨论】:

以上是关于Chrome DOM 未针对 jQuery 追加/淡入更新的主要内容,如果未能解决你的问题,请参考以下文章

JQuery:分离和追加后DOM状态不更新

Jquery元素追加和删除

Jquery元素追加和删除

jquery的dom操作

如何制作chrome插件,可以用jquery修改已知网页DOM

JQuery