提问人：Gergő 提问时间：3/22/2012 最后编辑：Brian Tompsett - 汤莱恩Gergő 更新时间：9/13/2020 访问量：162
自动生成的元素上的不显眼的 JavaScript 事件
Unobtrusive JavaScript event on auto-generated elements
问：
我在博客管理页面上的每篇文章中都有这个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 请求，但我不知道如何以不显眼的方式设置事件。我的示例不起作用，因为无论我单击哪个链接，都会使用最后添加的 id 触发：sendDeleteRequest()
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"));
}
}
}
这段代码有什么问题？还有什么我应该注意的吗？我尝试过同样的方法，但没有成功。我仍然使用 XHTML 1.0，但我不能在这个项目中使用 jQuery。addEventListener()
答：
2赞
jfriend00
3/22/2012
#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)
我在您的代码中所做的主要更改是使用引用来获取单击的值。你这样做的方式导致了问题，因为当点击发生时，循环和值已经完成，所以值不是你想要的。thisidfornodenode
评论