将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。它返回NodeList，但是querySelector仅返回找到的第一个元素：

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

然后，您将循环：

for (var i = 0; i < deleteLink.length; i++) {
    deleteLink[i].addEventListener('click', function(event) {
        if (!confirm("sure u want to delete " + this.title)) {
            event.preventDefault();
        }
    });
}

另外，只有在时，您才应该阻止Default confirm === false。

还值得注意的是，此return false/true方法仅对与绑定的事件处理程序有用onclick = function() {...}。对于addEventListening你应该使用event.preventDefault()。

ES6版本

通过使用Array.prototype.forEach迭代而不是for循环，可以使它更简洁并且更安全地闭环

var deleteLinks = document.querySelectorAll('.delete');

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', function(event) {
        if (!confirm(`sure u want to delete ${this.title}`)) {
            event.preventDefault();
        }
    });
});