在 Javascript 的 for 循环中分配点击处理程序

Posted 2023-03-06

【中文标题】在 Javascript 的 for 循环中分配点击处理程序

【英文标题】：Assign click handler in for loop in Javascript

【发布时间】：2012-02-11 11:17:48

【问题描述】：

谁能告诉我为什么会这样：

$("#test1 td").click(function(event) 
  $("#test1").addClass("tableRowSelected");
);
$("#test2 td").click(function(event) 
  $("#test2").addClass("tableRowSelected");
);

但这不是：

for(var i = 1; i < 3; i++) 
  $("#test" + i + " td").click(function(event) 
    $("#test" + i).addClass("tableRowSelected");
  );

我也尝试在第二个代码 sn-p 中使用 i.toString() 但这没有帮助:(

【问题讨论】：

Assign click handlers in for loop 的可能重复项

抱歉 - 我没看到，不过我认为这个答案对我有好处。

【参考方案1】：

更新

要让它工作，请将$("#test" + i).addClass("tableRowSelected"); 更改为$(this).parents('tr').addClass("tableRowSelected");

正如 Pointy 指出的，实际上 i 确实存在，其值为 4，这是无效的。

---

这是因为，在第二种情况下，当事件实际被触发时，i 不再存在。

【讨论】：

@Pointy - +1 是的，弄错了！实际上 i 确实存在，其值为 4，这是无效的

【参考方案2】：

事件处理函数接收到i 变量的持久引用，而不是它创建时的副本。详情请见this other answer。

【讨论】：

一旦某个天才将聪明才智融入流行的 IDE 向人们解释这一点，这个地方就会变得有点寂寞。

您建议的***.com/questions/4091765/… 的答案做到了，谢谢。

@ing0：很好。我想我会在某个时候为这个答案添加一个解释，目前还很缺乏，但这个标题似乎应该经常出现在搜索中。

我检查了几个答案，但没有看到那个。我想我愚蠢地认为这是不那么常见的事情。再次感谢。

【参考方案3】：

如何使用：

$("table").on("click", "td", function() 
    $(this).parent().addClass("tableRowSelected");
);

这将使用事件委托将事件附加到表格并通过 td 过滤点击事件