0

我有一张有几行表格的表格。每个表行都应调用 reWrite() 函数，并使用单击的表行号。这怎么可能？这是我的JS代码：

for (i=0;i<x.length;i++)
  {
  document.write("<tr id='"+i+"'><td>");
  document.write(x[i].getAttribute('name'));
  document.write("</td></tr>");
  $("#"+i).click(function(){ reWrite(i); return false; });
  }

我可以在这个循环中为每一行添加一个监听器。但是 reWrite(i) 不起作用。我该如何解决这个问题？

谢谢。

4

3 回答 3

3

它不起作用，因为您提供的函数click具有对变量的持久引用，而不是创建函数时的副本。因此，当点击发生时，无论是哪一个，它都会看到then的值（可能是）。ii x.length

要修复它，在这种特定情况下最简单的方法是使用行的id属性，因为您将信息保存到行：

$("#"+i).click(function(){ reWrite(this.id); return false; });

但是，我对您的代码完全正常工作感到有些惊讶，因为您id在 CSS 选择器中使用了无效值。尽管您可以id在 HTML 中具有以数字开头的值，但它们在 CSS 中无效，因此您与$()( #0,#1等) 一起使用的选择器是无效的。jQuery 为您容忍它们（可能是偶然的，因为它优化了对调用的调用getElementById），但我强烈建议不要这样做。

解决问题的各种其他方法（而不是使用id）：

  1. 使用额外的data参数 jQuery 让你为事件指定：

    $("#"+i).on('click', i, function(e){ reWrite(e.data); return false; });

  2. 让点击处理程序关闭一个不同的东西i，而不是改变：

    $("#"+i).on('click', i, buildHandler(i));

//...outside the loop:
function buildHandler(index) {
    return function() {
        reWrite(index);
        return false;
    };
}

  3. 在行上使用data-*属性（但这很像使用id）。

  4. 使用techfoobar 建议的旧式onxyz处理程序（但没有不必要的，这与在 jQuery 中的含义不同）：return false

    document.write("<tr id='"+i+"' onclick='reWrite("+i+");'><td>");

    我不是粉丝，但这是一种选择。

document.write最后：如果你可以避免它，我建议不要使用它，而且你几乎总是可以避免它。

于 2013-05-22T14:08:45.650 回答
1 
for (i = 0; i < x.length; i++) {
    document.write("<tr id='" + i + "'><td>");
    document.write(x[i].getAttribute('name'));
    document.write("</td></tr>");
    (function (index) {
        $("#" + index).click(function () {
            reWrite(index);
            return false;
        });
    })(i);
}
于 2013-05-22T14:07:42.997 回答
1

如何指定事件处理程序内联使用onclick：

document.write("<tr id='"+i+"' onclick='reWrite("+i+");'><td>");

旁注：</tr>最后一个document.write("</td></tr>");看起来很错误。您在 every 之后结束该行<td>，而之前没有开始一行。

于 2013-05-22T14:08:50.260 回答