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

Chrome DOM not updating for jQuery append/fadeIn

本文关键字：淡入 更新 追加 jQuery DOM Chrome      更新时间：2023-09-26

从服务器获取新记录后，我使用 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
    • 浏览器
  • 野生动物园 5.1.7
  • 火狐 14.0.1
  • 铬 21.0.1180.79
  • 歌剧 11.64

它始终适用于上述所有浏览器，但 Chrome 除外。它偶尔在Chrome中工作。

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

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

我尝试用show替换fadeIn或没有更改的fadeTo。

"类似问题"中的任何答案都不适合我。记录的标记仅在 <div> 秒内为 <div> 秒，我在添加新记录之前和之后验证了页面，以查看无效的 HTML 是否可能是问题所在。

有什么想法或想法吗？

试试这个：

$(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);
});

您可以通过此小提琴链接进行检查

相关文章：