我有一个删除超链接
<a href="#" class="btn btn-danger btn-mini" id="delCategory">Delete</a>
和Jquery函数
$(document).ready(function()
{
$("#password_validate").validate({
rules:{
current_pwd:{
required: true,
minlength:6,
maxlength:20
},
new_pwd:{
required: true,
minlength:6,
maxlength:20
},
confirm_pwd:{
required:true,
minlength:6,
maxlength:20,
equalTo:"#new_pwd"
}
},
errorClass: "help-inline",
errorElement: "span",
highlight:function(element, errorClass, validClass) {
$(element).parents('.control-group').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parents('.control-group').removeClass('error');
$(element).parents('.control-group').addClass('success');
}
});
$("#delCategory").click(function(){
alert("Test");
if(confirm('Are you sure you want to delete this Category?')){
return true;
}
return false;
});
});
代码的其他部分可以访问#password_validate并确保密码字段是必需的和全部。但是来自同一HTML页面的#delcategory无法访问该函数并返回确认。
我可以从Chrome控制台调用Jquery函数并得到弹出和确认，但我的href无法调用它，它在没有确认的情况下处理删除。
将event.preventdefault()添加到click（...）事件处理程序中，以防止发生属于该事件的默认操作/行为。即：
Event.PreventDefault（）
<form method="POST" action="/category/{{$id}}">
@csrf
@method("DELETE")
<input type="hidden" name="id" value="{{$id}}">
<input id="delCategory" type="submit" class="btn btn-danger text-center btn-mini" value="Delete">
</form>
jQuery
$("#delCategory").click(function (e) {
e.preventDefault();
if (!confirm('Are you sure you want to delete this Category?')) {
return;
}
const $form = $(this).closest("form");
$.ajax({
type: $form.attr("method"),
url: $form.attr("action"),
data: {
"_method": $form.find("input[name=_method]").val(),
"_token": $form.find("input[name=_token").val(),
"id": $form.find("input[name=id").val()
}
});
});
