首页 > 解决方案 > 用ajax确认删除

问题描述

我们如何确认ajax调用的数组元素结果的删除?

我有一个数组:

$.ajax({  
           url: "recursive.php",
           method:"POST",
           dataType: "json",       
           success: function(data)  
               {
                  $('#treeview').treeview({
                      data: data
                  });
               }   
      });

在我的recursive.php我有这个代码:

$arr = array(
        'text' => '<img src="img/pdf.png"><a href="delete.php?doc='.$sub_data["code"].' "target="_blank">'.$sub_data["n_doc"].'</a>
       '
       );  

在此<a href,我需要在删除前确认。在 delete.php 我有:

$sql = mysqli_query($conn, ' DELETE FROM saisie WHERE code = "'.$doc.'" ') or die (mysqli_error());

标签: phpajax

解决方案


在 AJAX 添加到 DOM 时完成显示确认的最简单方法是在视图的 DOMReady 函数中绑定一个委托事件侦听器。

由于 jQuery 在状态期间绑定事件处理程序DOMReady,因此它不会绑定ajax.success函数中的其他元素,除非响应包含 javascript 和dataTypeis 'script' 或者您从成功函数解析data变量并手动添加事件。

这假设一个带有id="treeview", 的元素已经存在。

<script type="text/javascript">
jQuery(function($) {
    $(document).on('click', 'a[href^="delete.php"]', function(e) {
        return window.confirm('Are you sure you want to delete this file?');
    });

    $.ajax({
        url: "recursive.php",
        method:"POST",
        dataType: "json",       
        success: function(data) {
            $('#treeview').treeview({
                data: data,
                selectedBackColor: 'rgb(211,211,211)',
                selectedColor: '#4A4A49',
                enableLinks:true,
                collapsedall: true
            });
        }
    });
});
</script>
<div id="treeview"></div>

这通过告诉 jQuery 监视#treeview元素内部的所有点击来工作,以获取<a href="delete.php">. 具体href^="delete.php"表示一个以 开头的<a>元素。如果找到,则执行回调函数并显示确认对话框。hrefdelete.php


如果您向锚元素添加class属性,则可以替换为.recursive.phpa[href^="delete.php"]a.classname

示例https://jsfiddle.net/ub1hw9tn/

$arr = array(
    'text' => '<img src="img/pdf.png"><a class="delete" href="delete.php?doc='.$sub_data["code"].'" target="_blank">'.$sub_data["n_doc"].'</a>'
); 

然后在你的 javascript

$(document).on('click', 'a.delete', function(e) {
    if (!window.confirm('Are you sure you want to delete this file?')) {
       e.preventDefault();
    }
});

推荐阅读