我有一个删除ID的列表视图。我想为具有特定类的所有元素添加一个侦听器,并发出确认警报。
我的问题是,这似乎只会将侦听器添加到它找到的类的第一个元素。我尝试使用,querySelectorAll但是没有用。
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(); ?>
您应该使用querySelectorAll。它返回NodeList,但是querySelector仅返回找到的第一个元素:
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。
confirm === false
还值得注意的是,此return false/true方法仅对与绑定的事件处理程序有用onclick = function() {...}。对于addEventListening你应该使用event.preventDefault()。
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(); } }); });