javascript - 删除前确认消息

Question

我想在删除文件之前进行确认。我的代码没有确认，就像这样

<form action="delete.php" method="get">
<table>
<?php 
    foreach ($files as $file) {
                   ?>
<tr>
        <td><?php echo $fajl['file_name'];?></td>
        <td><a href="delete.php?id=<?php echo $file['file_id'];?>"><img src="img/delete.png"/></a></td>
     </tr>
        <?php } ?> 
        </table>
    </form>

delete.php的一部分

...if(isset($_GET['id'])){
   $id = $_GET['id'];
   $query = $pdo->prepare('DELETE FROM files WHERE file_id = ?');
   $query->bindValue(1, $id);
   $query->execute();
}
$files = $file->fetch_all();
...

当我点击删除图像文件被删除。它工作得很好，但我想在删除文件之前确认一下。我尝试使用Zebra 对话框来添加class="delete"

<a href="delete.php?id=<?php echo $file['file_id'];?>"><img class="delete" src="img/delete.png"/></a>

和下一个代码

    <script>
    $(document).ready(function () {
$(".delete").bind("click", function (e) {
    e.preventDefault();
    var $this = $(this);
    $.Zebra_Dialog("Do you want to delete this file?", {
        type: "question",
        title: "Are you sure?",
        buttons: ['Yes', 'No'],
        onClose: function (caption) {
            if (caption == 'Yes') {
                $.ajax({
                    url: 'delete.php',
                    data: {
                        id: $this.data('id'),
                        success: function(data){
            alert("File deleted");
        }
                    }
               })
            }
        }
    })
});
});
    </script>

但它不起作用...... PS现在我看到Zebra对话框有一个选项

'buttons':  [
                {caption: 'Yes', callback: function() { alert('"Yes" was clicked')}},
                {caption: 'No'},
            ]

有没有可能，而不是

callback: function() { alert('"Yes" was clicked')}

我打电话

delete.php?id=<?php echo $file['file_id']

Answer 1

您可以使用confirm('Message here')返回true或的函数false。

$(document).ready(function () {
    $(".delete").bind("click", function (e) {
        e.preventDefault();
        if (window.confirm('Are you sure?'))
        {
            // .. ajax call ..
        }
    });
});

编辑：

您的 ajax 调用中有语法错误。

$.ajax({
    url: 'delete.php',
    data: { id: $this.data('id') },
    success: function(data){
        alert("File deleted");
    }
});

此外，没有$this.data('id'), 所以在你的 HTML 中：

<a data-id="<?= $file['file_id'] ?>" class="delete"><img src="img/delete.png"/></a>