如何防止多次点击

Question

如下图所示，由于在“保存”按钮中单击多次，因此会在数据库中插入一个空值。如何防止多次点击，以便空数据无法插入我的数据库？

任何帮助都会欣赏!!

这是我的剧本

$(document).ready(function(){

    $("#save").click(function(){
        ajax("save");
    });

    $("#add_new").click(function(){
        $(".entry-form").fadeIn("fast");    
    });

    $("#close").click(function(){
        $(".entry-form").fadeOut("fast");   
    });

    $("#cancel").click(function(){
        $(".entry-form").fadeOut("fast");   
    });

    $(".del").live("click",function(){
        if(confirm("Do you really want to delete this record ?")){
            ajax("delete",$(this).attr("id"));
        }
    });

    function ajax(action,id){
        if(action =="save")
            data = $("#userinfo").serialize()+"&action="+action;
        else if(action == "delete"){
            data = "action="+action+"&item_id="+id;
        }
        $.ajax({
            type: "POST", 
            url: "ajax.php", 
            data : data,
            dataType: "json",
            success: function(response){
            console.log(JSON.stringify(response))
                if(response.success == "1"){
                    if(action == "save"){
                        $(".entry-form").fadeOut("fast",function(){
                            $(".table-list").append("<tr><td>"+response.cat_name+"</td><td>"+response.cat_code+"</td><td>"+response.letter+"</td><td><a href='#' id='"+response.row_id+"' class='del'>Delete</a></td></tr>");   
                            $(".table-list tr:last").effect("highlight", {
                                color: '#4BADF5'
                            }, 0000);
                        }); 
                        $(".entry-form input[type='text']").each(function(){
                            $(this).val("");
                        });                     
                    }else if(action == "delete"){
                        var row_id = response.item_id;
                        $("a[id='"+row_id+"']").closest("tr").effect("highlight", {
                            color: '#4BADF5'
                        }, 0000);
                        $("a[id='"+row_id+"']").closest("tr").fadeOut();
                    }
                }else{
                    alert("unexpected error occured, Please check your database connection");
                }
            },
            error: function(res){
                alert("Unexpected error! Try again.");
            }
        });
    }
});

Answer 1

验证返回成功后，取消绑定事件处理程序。

$("#save").click(function(){

//Asuming your form validation is success.
 $('#save').unbind( "click" );
//Change the style to indicate it was dissabled.

        ajax("save");
    });

Answer 2

使用return false;或使用e.preventDefault()

Answer 3

用户点击后停用该按钮。