Question

这是 html。

 <a href="source.php?admin_id=<?php echo $row['id'];?>&username=<?php echo $_SESSION['admin_username']; ?>" 
                      data-toggle="tooltip" 
                      data-placement="top" 
                      title="Delete"> 
                      <i id="del" class="mdi mdi-close"></i></a>

这里是 php。

    $sql = "delete from admin where id = '$id' ";
$conn->query($sql);

这是javascript。（不知道是不是这个问题）

 const deleteIcon = document.getElementById("del");
    deleteIcon.addEventListener("click",(e) => { 
       const confirmVar = confirm("Do you want to proceed? ");
       if(confirmVar){
            return true;
       }else{
            return false;
       }
})

Answer 1

您将点击处理程序分配给子元素“i”元素，但这不会阻止父链接“a”元素在点击时转到其 href。

当 JavaScript 中的 confirmVar 为 true 时，您可以以编程方式调用删除端点。如果这样做，链接“a”元素将需要更改为其他内容或删除，以便在单击元素时并不总是调用删除端点。

Answer 2

e.preventDefault() 将阻止链接尝试转到另一个页面。在这个例子中有很多删除按钮。代码被注释以进行解释，但在您的实际代码中，container 将是当有人删除它时您想要删除的任何元素。此外，将 id='del' 更改为 class='del'，因为所有 ID 都必须是唯一的。

// get all the delete icons (class='del')
const deleteIcons = document.querySelectorAll(".del");
// for each one...
deleteIcons.forEach(el => {
  // add a click event listener
  el.addEventListener("click", (e) => {
    // stop it from acting like a normal link
    e.preventDefault();
    // prompt the question
    const confirmVar = confirm("Delete?");
    // if OK, find the closest parent with the class 'container' and remove it
    if (confirmVar) e.target.closest('.container').remove()
  })
})

.container {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 10px;
}

.container a {
  text-decoration: none;
}

<div class='container'>
  <a href="https://google.com" class="del" data-toggle="tooltip" data-placement="top" title="Delete">
  Delete Me <i class="mdi mdi-close"></i>
</a>
</div>
<div class='container'>
  <a href="https://google.com" class="del" data-toggle="tooltip" data-placement="top" title="Delete">
  Or Delete Me <i class="mdi mdi-close"></i>
</a>
</div>
<div class='container'>
  <a href="https://google.com" class="del" data-toggle="tooltip" data-placement="top" title="Delete">
  Or Maybe Me <i class="mdi mdi-close"></i>
</a>
</div>

我如何解决当我点击 OK 它删除数据但当我点击 CANCEL 它也删除。单击取消时它应该什么都不做

2 个答案: