Question

我需要做以下事情：

首先，在服务器上获取数据paths。数据包含path数组，长度未知。
然后我创建了一个list-group，其中list-group-item代表path。
最后，我设置了每个click的{{1}}函数，该函数在数据数组中显示了相应的list-group-item。

这是代码

path

但是，无论我点击哪个var i = 0; for(path of paths) { i++; $("#list_path").append('<a id="list-path-' + i + '" class="list-group-item tooltip-button"">' + "Path " + i + '</a>'); $("#list-path-" + i).click(function() { console.log(path) }) }，都只显示最后一个list-group-item元素。我想问题是只有path的指针被分配给click函数，它在for循环的末尾总是指向最后一个path。

如何设置点击功能以显示不同的path？

感谢。

Answer 1

你可以使用闭包

var i = 0;
for(path of paths) {
  i++;
  $("#list_path").append('<a id="list-path-' + i + '" class="list-group-item tooltip-button"">' + "Path " + i + '</a>');
  $("#list-path-" + i).click((function(path) {
      // return function wich has own variable path
      return function () { console.log(path) };
  })(path))
}

Answer 2

你必须这样做

$("#list-path-" + i).click(function() { console.log($(this).text()); })

由于闭包，path是for循环的最后一个值。

Javascript动态创建元素和onclick函数

2 个答案: