Question

我有一个表，我希望在每个行上处理点击事件，具体取决于表格单元格的内容。该表（当前）是从静态数组动态填充的，但稍后它将从数据库中填充：

var routeTable = document.getElementById('routeTable');
var routes = [
  ['..', '..', '..', "url_1"],
  ['..', '..', '..', "url_2"],
  ['..', '..', '..', "url_3"],
  ['..', '..', '..', "url_4"],
]
for (r = 0; r < routes.length; r++) {
   route = routes[r];
   row = routeTable.insertRow(r+1);
   ....
   ....
   row.addEventListener("click", function () {  display_gpx(route[3]);
   });
}

麻烦的是，传递给函数display_gpx（）的参数始终是值“url_4”（来自表中的最后一个路径）。

我发现在创建文档时必须存在用于单击的元素，因此我查看here（纯js版本）并尝试添加

row.className = "myClick";

并将eventListener更改为

 document.addEventListener("click", function (e)
{
    if (e.target.classList.contains("myClick"))
      display_gpx(route[3]);
},false);

但事件根本不会发生。

我想我之前已经解决了这个问题，但是经过长时间的休息后回到javascript并且不记得解决方案了！

Answer 1

试试这个：

(function(url) {
     row.addEventListener("click", function () {  display_gpx(url); });
})(route[3]);

编辑：使用简单代码复制问题的代码段：

var routes = [
  ['..', '..', '..', "url_1"],
  ['..', '..', '..', "url_2"],
  ['..', '..', '..', "url_3"],
  ['..', '..', '..', "url_4"],
]

for (r = 0; r < routes.length; r++) {
   route = routes[r];
   setTimeout(function () {  console.log("not working: " + route[3]); }, 100);
}

for (r = 0; r < routes.length; r++) {
   route = routes[r];
   (function(url) {
       setTimeout(function () {  console.log("working: " + url); }, 100);
   })(route[3]);
}

Answer 2

您需要将 myClick 类添加到每行的最后一个单元格中。

代码段（点击网址...）：

var routeTable = document.getElementById('routeTable');
var routes = [
    ['..', '..', '..', "url_1"],
    ['..', '..', '..', "url_2"],
    ['..', '..', '..', "url_3"],
    ['..', '..', '..', "url_4"],
]
for (r = 0; r < routes.length; r++) {
    route = routes[r];
    row = routeTable.insertRow(r);
    for(i=0; i<route.length; i++) {
        newCell = row.insertCell();
        newText  = document.createTextNode(route[i])
        newCell.appendChild(newText);
        if (i == 3) {
            newCell.classList.add('myClick')
        }
    }
}
document.addEventListener("click", function (e) {
    if (e.target.classList.contains("myClick"))
        console.log('classList is: ' + e.target.classList + ' element text is: ' + e.target.textContent);
},false);

<table id="routeTable">
    <tbody>
    </tbody>
</table>

向表中添加几个事件侦听器

2 个答案: