jQuery在Chrome下找到错误的元素

Question

我正在使用 jQuery 遍历 HTML 表格，并动态填写每一行的行号（通过在文本框中填充行号）：

function updateRowNums() {
  $('#myTable').find('tr').each(function(index) {
    $(this).find('input[id$="_rowOrder"]').val(index);   
  });
}

这个函数在下面被调用：

$(document).ready(function() {
  // .. code truncated ... //
  updateRowNums();
});

这在 Firefox 下运行良好。然而，在 Chrome（尝试了 5.x 和 9.x（测试版））和有时 Safari 下，这最终会填充一堆甚至不匹配的其他字段：

'input[id$="_rowOrder"]'

标准，带有行号。所以基本上它将数字分散在其他不相关的文本字段中......

我很确定这是某种 Chrome 或 jQuery 错误，但我只是在检查，因为它似乎是非常基本的功能。顺便说一句，如果我在代码中引入警报，那么它在 Chrome 上可以正常工作，所以这可能与 Chrome 中文档加载的时间有关：

function updateRowNums() {
  $('#myTable').find('tr').each(function(index) {
    alert("XXXXXXXXXXXXXXXXXXX");
    $(this).find('input[id$="_rowOrder"]').val(index);   
  });
}

去这里看例子：

http://jsfiddle.net/eGutT/6/

在本例中，您需要重现的步骤是：

1. 使用 Chrome（或 Safari——有时也会失败）访问 URL。
2. 您会注意到到目前为止，一切都按预期工作（即数字填充在第一列）
3. 单击“导航离开”链接。
4. 点击返回
5. 您将看到在顶行和第一列下方填充的数字

您会注意到我添加了控制台日志记录，以输出正在修改其值的元素的 ID。该日志的输出是：

one_rowOrder
two_rowOrder
three_rowOrder

这表示只触及了 3 个元素。但是，从结果中，您可以看到 5 个元素中都有数字。

谢谢， 盖伦

Answer 1

问题是您的输入没有名称属性。当您在历史记录中前进和后退时，Chrome/Safari 似乎会尝试将您输入的内容保存到表单字段中。因为您的输入没有名称属性，所以它猜测将值放回哪个输入字段，并且猜测不正确。

将名称属性添加到您的字段并全部修复：http://jsfiddle.net/petersendidit/eGutT/14/

Chrome/Safari 可能应该检查 name 属性的 id 属性是否缺失。

Answer 2

如果您使用数字作为您的 ID，jQuery 将无法识别它们和/或正确操作，因为它是无效的 HTML。要么删除数字，要么在它们前面放一个字母。