自动生成的元素上不显眼的 JavaScript 事件答案

【问题标题】：Unobtrusive JavaScript event on auto-generated elements自动生成的元素上不显眼的 JavaScript 事件
【发布时间】：2012-04-06 13:01:52
【问题描述】：

对于博客管理页面上的每篇文章，我都有这个 PHP 代码循环：

echo '<a class="delete_link" id="delete_link_'.$row['rowid'].'">Delete</a>';

所以它输出：

<a class="delete_link" id="delete_link_1">Delete</a>
<a class="delete_link" id="delete_link_2">Delete</a>
<a class="delete_link" id="delete_link_3">Delete</a>

等等……

通过单击这些链接，我希望浏览器通过 XHR 发送 DELETE 请求，但我不知道如何以不显眼的方式设置事件。我的示例不起作用，因为sendDeleteRequest() 是使用最后添加的 id 触发的，无论我点击哪个链接：

function sendDeleteRequest(id) {
    // I only put a simple alert in this function for now.
    alert("Id of firing element: " + id);
}

onload = function() {
    var deleteLinks = document.getElementsByClassName("delete_link");
    for (var node in deleteLinks) {
        deleteLinks[node].onclick = function() {
            sendDeleteRequest(deleteLinks[node].getAttribute("id"));
        }
    }
}

这段代码有什么问题？还有什么我需要注意的吗？我对addEventListener() 进行了同样的尝试，但没有成功。我仍然使用 XHTML 1.0，我不能在这个项目中使用 jQuery。

【问题讨论】：

标签： javascript onclick xhtml dom-events unobtrusive-javascript

【解决方案1】：

你可以这样使用：

var deleteLinks = document.getElementsByClassName("delete_link");
for (var i = 0; i < deleteLinks.length; i++) {
    deleteLinks[i].onclick = function() {
        sendDeleteRequest(this.id);
    }
}

注意，使用for (node in deleteLinks) 迭代数组是不明智的，因为除了数组元素之外，迭代中还会包含可枚举的属性。这种类型的迭代只能用于迭代对象的所有属性。

我在您的代码中所做的主要更改是使用对this 的引用来获得点击id 值。你这样做的方式引起了问题，因为for 循环和node 的值在稍后发生点击时已经运行完成，所以node 的值不是你想要的。

【讨论】：