在 Jquery 中更改按钮属性的奇怪行为答案

【问题标题】：Strange Behaviour on changing the property of button in Jquery在 Jquery 中更改按钮属性的奇怪行为
【发布时间】：2013-12-12 21:23:09
【问题描述】：

我在点击处理程序上禁用了一个按钮，奇怪的是，一旦按钮被禁用，之后它就不会被提交。它因浏览器而异。 Firefox 在禁用提交按钮后允许提交表单，但 chrome 和 IE 阻止了它

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script>
        $(function(){
            $("#btn").on("click",function(){

                $(this).prop('disabled','true');
                alert('clicked');
            });



            $("#frm").on("submit",function(){
                alert("submit1");

            });

            $("#frm").on("submit",function(){
                alert("submit2");
            });

        })
    </script>
</head>

<body>
    <form id="frm" action="#">
        <input type='submit' id="btn"/>
    </form>
</body>

这是一个奇怪的行为，提交被禁用按钮被阻止。可能的原因是什么。我在 Chrome 和 IE 中得到的输出是执行点击然后脚本关闭

为什么不按顺序点击的执行然后执行提交

【问题讨论】：

将 type="submit" 改为 type="button"
@Riturajratan：学习者似乎想要提交表单。
这不是关于将类型从 SUBMIT 更改为按钮而是关于“为什么会这样”这是我编写的一个简单案例，在我们的场景中，我们无法按照您的建议更改代码跨度>
我认为问题在于不同的浏览器遵循不同的执行周期/决定不同的事件发生和不同的时间。我认为合并您的逻辑以便在显式调用提交表单后禁用按钮应该可以解决这个问题。

标签： javascript jquery html forms button

【解决方案1】：

我认为您的意思是，当您在单击提交按钮时禁用它时，表单不会被提交并且您希望它提交。

我相信原因是 click 事件发生在按钮的激活行为之前（这是 HTML5 规范中“它的作用”的术语） .启用（如规范所说的“可变”）提交按钮的激活行为当然是触发表单提交。但是，当浏览器决定激活行为时，也就是在click 处理程序被触发后，您已经禁用了该按钮。根据the spec 的说法，禁用的（“非可变”）提交按钮没有激活行为，因此不会提交表单。

所以问题变成了：浏览器什么时候决定使用什么激活行为，在click处理程序之前还是之后？对于这个问题的答案，我们求助于 DOM 事件规范，它告诉我们first the click occurs, then the activation behavior occurs。因此，Chrome 似乎是在 click 事件完成后做出决定，这是对规范的合理解读； Firefox 似乎在在click 事件完成之前做出决定。

不过，实际情况是，如果您禁用 click 处理程序中的按钮，则无法保证获得表单提交。要解决此问题，您可以非常短暂地延迟禁用按钮，以便事件在按钮未被禁用的情况下完成：

$("#btn").on("click",function(){
    var btn = this;

    setTimeout(function() {
        btn.disabled = true;
    }, 0);
    alert('clicked');
});

Live Example | Source

旁注：在上面，我还（有效地）将$(this).prop("disabled", true"); 替换为（有效地）this.disabled = true;。没有理由将元素包装在 jQuery 包装器中只是为了设置一个简单的属性值。

【讨论】：

这与更改代码无关，我想知道阻止提交的原因是什么，因为它在 Firefox 中运行良好。关于更改我的代码库很大并且包含许多处理程序，我在这里只是一个简单的示例来创建问题
@Learner：我已经添加了原因的解释（和链接）。
@Learner：还添加了更多内容。但最初的答案是务实的：你只需要更改代码，虽然很痛苦。

【解决方案2】：

应该解决您的问题：

$("#btn").on("click", function (e) {
        e.preventDefault();
        $(this).prop('disabled', true).closest('form').submit();
        //to submit FORM without firing jquery's attached handlers
        //$(this).prop('disabled', true).closest('form').get(0).submit();
        alert('clicked');
    });

DEMO

【讨论】：

在这种情况下，所有由 javascript[not juqery] 附加在表单提交上的事件处理程序将不会被执行。但我想执行附加到表单提交的所有处理程序
同样值得注意的是，如果提交按钮有一个值，上面将不会像正常提交那样将该值传递给表单。