Question

我有一个带按钮的表单，还有一些jquery来处理按钮的click事件。在IE中，click事件运行，然后表单提交（因为IE8的默认按钮行为是提交表单）。但是在Chrome中，表单提交永远不会发生。

$("#btnAdd").click(function () {
    console.log('clicked');
    $("#btnAdd").prop('disabled', true);
});

<form>
    <button id="btnAdd">Add</button>
</form>

这似乎与禁用按钮有关。是否有预期的行为，在Chrome中，禁用onclick的按钮不会自动提交，但在IE中，如果按钮被禁用，这并不重要？

Answer 1

我会使用附加到表单本身的onsubmit事件。这样，您可以阻止默认提交，禁用按钮，然后以编程方式提交表单。

我使用过jQuery的one()，因此处理程序只运行一次。否则，程序提交也将触发事件并创建无限循环。

$("#form").one('submit',function (e) {
    e.preventDefault();
    $("#btnAdd").prop('disabled', true);
    console.log('clicked');
    // Below, to submit the form
    $(this).submit();
});

<form id="form">
    <button id="btnAdd">Add</button>
</form>

在下面的jsfiddle中，我使用setTimeout来延迟提交程序表单。这只是为了演示两个动作的分离：禁用按钮并提交。

WORKING EXAMPLE

Answer 2

<强>编辑：而不是按钮，请尝试：

<script>
    $(document).ready(function() {
        $("#btnAdd").click(function() {
            console.log('clicked');
        });
    });
</script>
</head>
<body>
    <form>
        <input type="button" id="btnAdd" value="add" />
    </form>

适用于所有浏览器。

编辑：没有仔细阅读您的问题，抱歉......这个适合我。 code in fiddle

Chrome与IE11的不同按钮行为

2 个答案: