javascript将click事件监听器添加到类中 [英] javascript adding click event listener to class

问题描述

我有一个list id的列表视图。我想为具有特定类的所有元素添加一个监听器并执行确认警报。

I have a listview for delete id. I'd like to add a listener to all elements with a particular class and do a confirm alert.

我的问题是这似乎只是将监听器添加到第一个它找到的课程。我尝试使用querySelectorAll但它不起作用

My problem is that this seem to only add the listener to the first class it finds. I tried to use querySelectorAll but it didn't work

 <script>
        var deleteLink = document.querySelector('.delete');

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

         var choice = confirm("sure u want to delete?");
            if (choice) {
                 return true;
             }
            });
    </script>

list：

<?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();
     ?>

推荐答案

你应该使用 querySelectorAll 。它返回NodeList，但 querySelector 仅返回找到的第一个元素：

You should use querySelectorAll. It returns NodeList, however querySelector returns only the first found element:

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();
        }
    });
}

此外，只有在确认===时才应防止默认假。

值得注意的是， return false / true 仅对绑定 onclick = function（）{...} 。对于 addEventListening ，您应该使用 event.preventDefault（）。

It's also worth noting that return false/true is only useful for event handlers bound with onclick = function() {...}. For addEventListening you should use event.preventDefault().

演示： http://jsfiddle.net/Rc7jL/3/

ES6版本

你可以使它更清洁（更安全）闭合循环智慧）使用 Array.prototype.forEach 迭代而不是for循环：

You can make it a little cleaner (and safer closure-in-loop wise) by using Array.prototype.forEach iteration instead of for-loop:

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();
        }
    });
});

_{上面的示例使用 Array.from 和模板字符串。}

这篇关于javascript将click事件监听器添加到类中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！