防止单击按钮时默认值不随机工作答案

【问题标题】：Prevent Default not working randomly when button is clicked防止单击按钮时默认值不随机工作
【发布时间】：2019-07-23 19:47:20
【问题描述】：

浏览一些旧代码，似乎 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;
            }
        });
    });
});

【问题讨论】：

标签： javascript c# jquery asp.net-mvc razor

【解决方案1】：

只有当你的条件为真时你才阻止默认，但你实际上希望它总是被阻止，因为你正在使用 ajax

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

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

还要注意$(selector).val() 将返回字符串而不是null

【讨论】：

什么具体不起作用？这个词几乎没有意义
你是返回true还是只是返回？
刚刚看到你的更新！有用！太感谢了。我已经被这个问题难住了一段时间。

【解决方案2】：

来自 MDN：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Event 接口的 preventDefault() 方法告诉用户代理，如果事件没有得到显式处理，则不应像通常那样采取其默认操作。事件继续像往常一样传播，除非其中一个事件侦听器调用 stopPropagation() 或 stopImmediatePropagation()，其中任何一个都会立即终止传播。

换句话说，它不会破坏您的代码。它只会阻止 DOM 中的其他处理程序从这个处理程序中冒出来对事件做出反应。

也许您想在调用 e.stopImmediatePropagation(); 后做一个 return 语句；

【讨论】：

您是否在if 块末尾尝试过return true;？
@Paurian 不会返回 true... false 或者什么都不返回