将Click事件侦听器添加到具有相同类的元素

Question

我有一个删除ID的列表视图。我想为具有特定类的所有元素添加一个侦听器，并发出确认警报。

我的问题是，这似乎只会将侦听器添加到具有找到的类的第一个元素。我尝试使用，querySelectorAll但是没有用。

var deleteLink = document.querySelector('.delete');

deleteLink.addEventListener('click', function(event) {

    event.preventDefault();

    var choice = confirm("sure u want to delete?");

    if (choice) {

        return true;

    }

});

列表：

<?php 

    while($obj=$result->fetch_object())

    {

        echo '<li><a class="delete" href="removeTruck.php?tid='.$obj->id.'">'.$obj->id.'</a>'

            . '<a href="#" class="delete"></a>

                      </li>'."\n";

    }

    /* free result set */

    $result->close();       

    $mysqli->close();

?>

Answer 1

使用querySelectorAll和for循环的问题在于，它为数组中的每个元素创建了一个全新的事件处理程序。有时候，这正是您想要的。但是，如果您有许多元素，则创建单个事件处理程序并将其附加到容器元素可能会更有效。然后，您可以event.target用来引用触发事件的特定元素：document.body.addEventListener("click", function (event) {&nbsp; if (event.target.classList.contains("delete")) {&nbsp; &nbsp; var title = event.target.getAttribute("title");&nbsp; &nbsp; if (!confirm("sure u want to delete " + title)) {&nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; }&nbsp; }});在此示例中，我们仅创建一个附加到该body元素的事件处理程序。每当body点击内的元素时，click事件就会冒泡到我们的事件处理程序中。

Answer 2

您必须使用querySelectorAll需要选择带有所述类的所有元素，这又querySelectorAll是一个数组，因此您需要对其进行迭代并添加事件处理程序var deleteLinks = document.querySelectorAll('.delete');for (var i = 0; i < deleteLinks.length; i++) {&nbsp; &nbsp; deleteLinks[i].addEventListener('click', function (event) {&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; var choice = confirm("sure u want to delete?");&nbsp; &nbsp; &nbsp; &nbsp; if (choice) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });}