声明
起初，我尝试使用bootstrap模式做一个确认框，但它很复杂，很难设计。后来，当我在网上浏览一些想法时，我找到了Sweetalert2。
所以，我想在删除前使用Sweetalert2（https://sweetalert2.github.io/）进行删除，我今天刚刚发现它（20/4/19）并发现它真的很棒。
到目前为止我尝试过的
在删除按钮所在的A部分中，从以下代码中，该框未显示，而是跳过执行删除操作。
Front.php
<html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!--Sweetalert2 css and js files-->
<link rel="stylesheet" href="sweetalert2.min.css">
<script type="text/javascript" src="sweetalert2.min.js"></script>
<body>
<!--Table-->
<div class="table-responsive">
<table class="table table-hover table-fixed w-auto" border="2" align="center" style="color: white">
<!--Header-->
<thead>
<tr>
<th><center>ID</center></th>
<th><center>Type</center></th>
<th><center>URL</center></th>
<th><center>Issued date</center></th>
<th><center>Lattitude</center></th>
<th><center>Longitude</center></th>
<th colspan="2"><center>Action</center></th>
</tr>
</thead>
<!--Queries-->
<?php
for($i=0;$i<count($results->data);$i++):
$news = $results->data[$i];
?>
<tbody>
<tr>
<td><b><?php echo $news['crimenews_id'];?></b></td>
<td><?php echo $news['crimenews_cat'];?></td>
<td><?php echo $news['crimenews_url'];?></td>
<td><?php echo $news['crimenews_datetime'];?></td>
<td><?php echo $news['crimenews_locationLat'];?></td>
<td><?php echo $news['crimenews_locationLong'];?></td>
<td>
<a href="front.php?edit_id=<?php echo $news['crimenews_id'];?>" class="btn btn-info" style="border:2px solid black"><b>Edit  <i class="far fa-edit"></i></b></a>
<!-------------------------------------Section A-------------------------------------------------------------------------------------------------------------------------------------------------->
<a href="process.php?delete_id=<?php echo $news['crimenews_id'];?>" class="btn btn-danger" id="Test" style="border:2px solid black;"><b>Delete <i class="fas fa-trash-alt"></i></b></a>
<!-------------------------------------End Section A---------------------------------------------------------------------------------------------------------------------------------------------->
</td>
</tr>
</tbody>
<?php endfor ?>
</table>
</div>
</body>
</html>
<script>
$('#Test').click(function(e) // I do not sure about this line
{
e.preventDefault();
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
allowOutsideClick : true,
allowEscapeKey : true,
confirmButtonColor: 'btn btn-primary',
cancelButtonColor: 'btn btn-danger',
confirmButtonText: 'Sure'
})
})
</script>
这是一个现场演示：Codepen demo
首先，确保你没有复制html id - >使用class=""而不是id=""来获得类似的元素：
<!-- OLD:
<a href="process.php?delete_id=<?php echo $news['crimenews_id'];?>" class="btn btn-danger" id="Test" style="border:2px solid black;"><b>Delete <i class="fas fa-trash-alt"></i></b></a>
-->
<!-- new: -->
<a href="#" data-target="<?php echo $news['crimenews_id'];?>" class="prompt-delete btn btn-danger" style="border:2px solid black;"><b>Delete <i class="fas fa-trash-alt"></i></b></a>
请注意，为了确保使用确认框，我将href更改为＃，并将crimenews_id放入data-属性中。然后，在删除项目之前更新脚本以提示用户：
<script>
$(".prompt-delete").click(function() {
// get the target id to delete
var target_id = $(this).data("target");
// prepare the url to redirect in case of deleting an item
var url_delete = "process.php?process.php?delete_id=" + target_id;
// initialize confirmation box
Swal.fire({
title: "Are you sure?",
text: "You won't be able to revert this!",
type: "warning",
showCancelButton: true,
allowOutsideClick: true,
allowEscapeKey: true,
confirmButtonColor: "btn btn-primary",
cancelButtonColor: "btn btn-danger",
confirmButtonText: "Sure",
onClose: function(e) {
console.log(e);
}
}).then(result => {
if (result.value) {
// if CONFIRMED => go to delete url
window.location = url_delete;
}
});
});
</script>
来自@ verjas的答案有一些语法错误，所以我试着让它工作，它看起来像这样......
<a href="javascript:void(0)" data-id="<?php echo $news['crimenews_id'];?>" class="btn btn-danger remove" style="border:2px solid black;font-size:1em"><b><i class="fas fa-trash-alt"></i></b></a>
<script>
$(".remove").click(function()
{
var num = $(this).data("id");
var url = "process.php?delete_id=" + num;
Swal.fire({
titleText: "Are you sure for deleting this?",
text: "This action cannot be reverted.",
type: 'warning',
showCancelButton: true,
showCloseButton : true, //Close button at the top-right corner.
allowEscapeKey : true, //Press ESC to cancel
focusCancel : true, //Prevent unexpected delete due to mistakes.
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Sure',
}).then(result =>
{
if(result.value)
{
window.location = url_delete;
}
});
});
</script>