Ajax 异步删除资源，多次请求问题

[proxytoworld]

我在用 Laravel 框架构建 web 应用，在使用 Ajax 异步删除资源的时候，前端发送的 delete 请求一次比一次多一个

这是我的 Ajax 代码

function del(){
        $('#del').click(function (){
            $.ajax({
                type: "DELETE",
                url: '/api/apiposts/{{$id}}',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success:function (result){
                    console.log("success:" + result);
                    
                    //location.reload();
                },
                error:function (result){
                    console.log("error:" + result);
                }
            })
        });
    }
    
    <input type="button" value="删除" id="del" onclick="del()">
    

第一次点 button 的时候没有请求，这是 burp 抓到的包

[akaxiaok339]

第一次点击的时候是绑定事件 之后每次点击又再绑定一次事件 并且触发之前的事件 当然越来越多

[akaxiaok339]

$('#del').click / onclick 二选一就行

[gtchan13579]

function del(){

$.ajax({
type: "DELETE",
url: '/api/apiposts/{{$id}}',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
success:function (result){
console.log("success:" + result);

//location.reload();
},
error:function (result){
console.log("error:" + result);
}
})

}

<input type="button" value="删除" id="del" onclick="del()">

[qiayue]

$('#del').click 这一行的意思就是每次点击 #del 时执行内部匿名函数
就不要再在元素上写 onclick 了。

[kop1989]

现在你的程序的语义是：
触发点击事件 && 每次点击都往 id 为 del 的 dom 元素上添加一个 click 事件。

所以第一次点击没反应，然后越点越多。

[wenzichel]

onclick 和 del 中的 click 冲突了，每执行一次 del，就多绑定一次 click 事件，然后就多执行一次 ajax 请求

[proxytoworld]

@wenzichel
@kop1989
@qiayue
@gtchan13579
@akaxiaok339
@akaxiaok339 搞懂了！谢谢