jquery自定义div确认删除操作

时间:2015-04-27 22:40:44

标签: javascript jquery ajax

我有这个jquery删除客户评论。

我的问题在" if(确认"部分。我想显示div询问用户是否确定删除此评论。不仅仅是浏览器默认提示框。

我该怎么做?

var Progressajax = false;

$(document).ready(function() {
$(".delete_post").on('click',function(){

                       if(Progressajax) return;
                       Progressajax = true;

var element = $(this);
var I = element.attr("id");

if(confirm('Are you sure?')){

$.ajax({
   type: "POST",
   url: "/js-calls/post_delete.php",
   data: "id="+I,
   success: function(){
            Progressajax = false;
    $(".volta"+I).fadeOut(600, function(){
     $(".volta"+I).remove();
    });
   }
 });
}
return false;
});
});

有什么我可以在这里改进的吗? 感谢

1 个答案:

答案 0 :(得分:1)

一个简单的解决方案是在需要时使用jquery .hide().show()来隐藏/显示div元素。您可以通过上面提到的方法来增强它以利用引导程序,使其更像是一个视觉上吸引人的模式对话框,但这应该让您了解代码应该如何工作。

<强> HTML

<!DOCTYPE Html />
<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="button" value="Delete Item" id="btnDelete"/>
        <div id="confirmBox">
            <p>Are you sure you want to delete this record?</p>
            <br />
            <input type="button" value="Yes" id="btnYes"/>
            <input type="button" value="No" id="btnNo" />
        </div>
        <script type="text/javascript" src="jQuery_v1.10.2.js"></script>
        <script type="text/javascript" src="theJS.js"></script>
    </body>
</html>

<强>的JavaScript

$(document).ready(function () {
    $('#confirmBox').hide();

    $('#btnDelete').on('click', function (e) {
        $('#confirmBox').show();
    });

    $('#btnYes').on('click', function (e) {
        //Do Delete Action Here
        alert("Item Deleted");
        $('#confirmBox').hide();
    });

    $('#btnNo').on('click', function (e) {
        //Cancel Action Here
        alert("Action Cancelled");
        $('#confirmBox').hide();
    });

});