自动生成元素上的无干扰JavaScript事件

Unobtrusive JavaScript event on auto-generated elements

本文关键字：干扰 JavaScript 事件 元素 自动生成      更新时间：2023-09-26

对于博客管理页面上的每一篇文章，我都会循环使用以下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。

您可以使用这样的东西：

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的值不是您希望的值。

相关文章：