为什么在jquery ajax调用和刷新后dom不同步？答案

【问题标题】：Why is the dom out of sync after jquery ajax call and refresh?为什么在jquery ajax调用和刷新后dom不同步？
【发布时间】：2010-12-03 07:35:15
【问题描述】：

我有一个表格，它使用带有 ajax 的内联编辑来修改字段。该表按姓氏排序。

如果我更改姓氏以更改行顺序，然后刷新页面，则表会重新排序，但我更改的字段仍然具有 dom 中的先前值。输入字段在 html 中确实具有正确的值，但显示的是 dom 值。

当然，硬刷新会显示所有正确的值。

为什么我的 DOM 不同步？如何刷新以显示正确的值？

回复后编辑

是 Firefox 保留了输入字段的先前值。在网上一探究竟，发现添加<form autocomplete="off">会强制Firefox不缓存旧值。

【问题讨论】：

【解决方案1】：

几乎肯定与您的浏览器通过刷新保留表单值有关。您是否可以安排它，以便在刷新时再次触发您用于从输入字段更新 DOM 的触发器？

如果不知道 DOM 和输入字段在代码中的交互方式，很难提供更多细节。

【讨论】：

【解决方案2】：

我认为浏览器正在缓存表单字段的先前值（这很糟糕）。真正令人沮丧的是，如果我更改多个项目，几乎不可能确定 value 属性是否正确或字段中的文本是否正确（因为它可以去任何一种方式）。

我很惊讶您使用 ajax 但没有自动排序/自动刷新按钮。

在短期内，您应该使用可排序的表格以避免用户在页面上时感到困惑。

从长远来看，您应该采用我正在为一个非常相似的问题开发的解决方案...

存储数据（将其ajax 到服务器，服务器将其存储在数据库中），让表始终具有从数据库服务器端设置的值字段，并且在页面加载时，有一个循环遍历所有内容的 js 脚本输入元素的值，并从 value 属性手动设置字段的值，例如：

$("table :input").each(
     $(this).value($(this.attr("value")));
);

【讨论】：