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)转到网址 - 有时也会失败.
2. 您会注意到目前为止一切都按预期工作(即第1列填写的数字)
3. 单击"NAVIGATE AWAY"链接.
4. 点击返回
5. 您将看到在第一列和第一列中填充的数字

您会注意到我添加了控制台日志记录,以输出正在修改其值的元素的ID.此日志的输出是:

one_rowOrder
two_rowOrder
three_rowOrder

这表示只触及了3个元素.但是,从结果中,您可以看到5个元素中包含数字.

谢谢,盖伦

Answer 1

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

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

Chrome/Safari可能应该检查缺少name属性的id属性.