Question

我的MVC 5视图上有一个取消按钮，点击后，我想隐藏/显示几个DIV，但是，我也不想让表单提交。

这是取消按钮。

<input type="submit" id="btnCancelConsultant" name="btnCancelConsultant" class="btn btn-default" value="Cancel Update">

我有这个JQuery代码，应该在用户点击取消按钮时调用，但是，它根本不会被调用。我知道这一点，因为警报提示并没有发生。相反，表单会被提交，这是我不想发生的事情。

$("btnCancelConsultant").click(function () {

    alert("Cancel Called");
    //Show Add button, hide Update/Cancel button
    $("#AddConsultant").hide('fast');
    $("#UpdateConsultant").show('fast');

    e.preventDefault(); // prevents default
    //return false;

});

我也尝试用

替换我的JQuery函数的第一行

$("btnCancelConsultant").on('click', function () {

但是这仍然提交表格。

我不明白为什么只要我尝试使用

，表单就会提交

e.preventDefault(); 
return false;

停止提交。

有人可以帮我解决这个问题吗？

感谢。

Answer 1

将您的活动更改为此选项，以接受此案例中的事件参数e：

$("#btnCancelConsultant").click(function (e) {

    alert("Cancel Called");

    $("#AddConsultant").hide('fast');
    $("#UpdateConsultant").show('fast');

    e.preventDefault(); // prevents default


});

Answer 2

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

alert("Cancel Called");
//Show Add button, hide Update/Cancel button
$("#AddConsultant").hide('fast');
$("#UpdateConsultant").show('fast');

e.preventDefault(); // prevents default
//return false;

}）;

Answer 3

这是应该如何：

$("#btnCancelConsultant").click(function (e) { // <-- don't forget this one
    // your code ...

    e.preventDefault();   
});

Answer 4

您应该使用type="button"代替type="submit"。

使用，

<input type="button" id="btnCancelConsultant" name="btnCancelConsultant" class="btn btn-default" value="Cancel Update">

JS

$("#btnCancelConsultant").click(function (e) { //Added event argument
    //Your code
});

Answer 5

也许尝试使用提交而非点击

$( "#btnCancelConsultant" ).submit(function( event ) {
   event.preventDefault();
   return false;
});

Answer 6

我相信您错过了代码中的e。这会将事件通过点击函数传递给变量e，以便您可以使用e.preventDefault()停止默认设置。

您还错过了选择器中的#。您需要这个来搜索id为“btnCancelConsultant”的元素，而不是该名称的元素。因此，您需要$("#btnCancelConsultant")。

所以你的代码会变成：

$("#btnCancelConsultant").click(function (e) {

    alert("Cancel Called");
    //Show Add button, hide Update/Cancel button
    $("#AddConsultant").hide('fast');
    $("#UpdateConsultant").show('fast');

    e.preventDefault(); // prevents default
});

停止使用JQuery提交提交按钮

6 个答案: