javascript - 单击按钮时防止默认值不随机工作

Question

查看一些旧代码，发现 e.preventdefault() 在单击按钮时行为不正确。我不知道我以前怎么没有注意到这一点，但由于某种原因，它只是 Simpy 没有完成它的工作。即使执行了 If 语句，页面仍然会刷新。我是不是错过了什么，我是不是瞎了眼？谁能告诉我这是怎么回事吗？

另外，我想补充一点，它肯定会进入 IF 语句，因为需要取消隐藏的 DIV 确实会显示，但是页面无论如何都会刷新，并且会提交不应该提交的内容。

下面是我的代码:

谢谢。

表格:

    <form class="form-group" method="get" action="#">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-hover table-bordered">
                <thead>
                    <tr>
                        <th>Terminal</th>
                        <th>Command</th>
                        <th>Command Value</th>
                        <th> </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>@Html.DropDownListFor(o => o.TerminalsDDL, Model.TerminalsDDL, new { id = "ddlTerminalID", @class = "form-control align-middle" })</td>
                        <td onchange="UpdateHelpDescript();">@Html.DropDownListFor(o => o.TerminalCommandLookupsDDL, Model.TerminalCommandLookupsDDL, new { id = "ddlCommandValue", @class = "form-control align-middle" })</td>
                        <td>@Html.TextBoxFor(o => o.UserEnteredTerminalCommands, new { Class = "form-control align-middle", Id = "cmdValueValue" })</td>
                        <td> <input id="btnSaveTerminalCommand" type="button" value="Insert" class="btn btn-primary align-middle" /> </td>
                </tbody>
            </table>
        </div>
    </div>
</form>

JS:

   $(function () {
    $("#btnSaveTerminalCommand").click((e) => {

        if ($("#ddlCommandValue").val() == " " || $("#ddlCommandValue").val() == null || $("#ddlCommandValue").val() == 0 || $("#cmdValueValue").val() == " " || $("#cmdValueValue").val() == null) {

             //window.alert("Please select a valid command.");
             $("#alertPopUp").removeClass("hidden");
             e.preventDefault();
            e.stopImmediatePropagation();
        };

        var data = {
            TerminalID: $("#ddlTerminalID").val(),
            CommandID: $("#ddlCommandValue").val(),
            CommandValue: $("#cmdValueValue").val()
        };

        $.ajax({
            url: '@Url.Action("AddTerminalCommand", "TerminalCommand")',
            type: "POST",
            data: data,
            success: function (response) {
                console.log("Success");
                window.location.href = response.Url;
            }
        });
    });
});

Answer 1

只有当条件为真时，您才阻止默认行为，但实际上您希望始终阻止默认行为，因为您正在使用ajax

 $("#btnSaveTerminalCommand").click((e) => {
         e.preventDefault();
         if(....)

在条件中添加一个return以防止ajax使用无效数据执行

另请注意，$(selector).val() 将返回字符串，而不是 null