1

作为一名资深的 UX 开发人员，这对我来说绝对是莫名其妙的。

当用户选中无序列表开头的框时，我通过 AJAX 请求加载了一些内容。选中该框时，列表中会填充列表项，每个列表项都包含自己的复选框，默认状态为“已选中”。

从现在开始，如果我右键单击复选框和“检查元素”，结果会很奇怪。选中或取消选中最顶部的框后，结果如预期：选中或取消选中该框，在检查器中，这反映在 HTML 中。因此，在检查时，将创建一个新属性（检查=“已检查”），并且状态反映了页面本身中的HTML中所示。

对于那些通过 AJAX 加载的复选框，结果并不那么简单（或正确）。可以选中和取消选中列表中的框，提交表格时，结果是准确的。当使用 jQuery 或常规 JavaScript 动态计算时，这些复选框的值会准确报告。

但是，在 Chrome 开发人员工具、Firefox 文档检查器或 Firebug 中，这些最近加载的框的 HTML 不准确。它们确实以与预期相同的状态加载（即它们都加载时将其状态设置为打开；例如，在所有情况下都已检查=“已检查”）。然而，当通过浏览器窗口更改状态时，检查器中的 HTML 不会更新。反之亦然：在 Inspector 窗口内更新 HTML 时，浏览器窗口不会更新。

虽然我不确定这是否与问题有关，但我会包括它以防万一：有问题的列表也包含在 Bootstrap 手风琴中（默认情况下，它处于“折叠”状态，但是随着内容通过 AJAX 加载而扩展，以提供流畅的 UX 体验）。

到目前为止，我已经使用 Google Chrome、Mozilla Firefox 和 Apple Safari 在 Windows 和 Mac OSX Mountain Lion 上对此进行了测试。结果在所有情况下都是一致的。我无法弄清楚为什么会以这种方式发生。任何反馈表示赞赏。

最后一点：由于此过程中涉及 AJAX 请求，并且提供必要响应的服务器位于防火墙后面（因为这是我正在处理的基于订阅的站点），我不确定我可以通过 JS Fiddle 提供一个示例。但是，如果有人对这可能如何工作有意见，我愿意接受这个建议，并很乐意提供这个令人沮丧的错误的例子。

更新：

在查看http://api.jquery.com/prop/上的 jQuery API 文档时，我注意到W3C 复选框规范表明“选中的属性值不会随着复选框的状态而改变，而选中的属性会”。所以，这可能是对这里发生的事情的部分解释。但是，它没有解释为什么更改非 AJAX 加载内容的属性会导致页面反映更改的状态，反之亦然。

4

1 回答 1

1

在仔细审查了围绕这个问题的 W3C 标准之后，很明显这是一个浏览器错误（尽管不是一个严重的错误）。之所以存在差异，是因为可能选择使用的非 AJAX 方法更“友好”并保持代码和表示之间的一致性，而 AJAX 方法更尊重真正的 W3C 规范。这是任何协作开发努力的结果。

对于那些希望避免任何此类不一致的人，我建议您使用以下语法：

$('#some-id').prop('checked', true); // Preferred method for checking a box or radio button

... 代替：

/* DON'T USE THIS CODE!
$('#some-id').attr('checked', 'checked'); // Deprecated method for checking a box or radio button
IF YOU DO, IT'S ON YOU. */
于 2013-09-19T13:19:13.513 回答