Jquery不处理href单击

Question

我有一个删除超链接

<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无法调用它，它在没有确认的情况下处理删除。

Answer 1

将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()
        }
    });
});