jQuery '.click(callback)' 阻止默认事件

Question

我试图防止双击表单按钮，禁用该元素几秒钟。

<form action="#" method="POST">
    <input type="text" />
    <input type="password" />
    <button class="myButton" type="submit">Send</button>
</form>


var that = this;
this.element = $(".myButton");
this.element.click(function(e) {
    this.element.prop("disabled", true);
    window.setTimeout(function() {
        that.element.prop("disabled", false);
    }, 2000);
});

它在 enabling/disabling 中成功，但是 .click() 功能的使用阻止了（自动？O_o）事件的传播，页面 没有'以 action 属性的形式遵循 link。

注意我正在尝试将行为添加到 之前工作正常的表单按钮（发布到 aciton link）。 enabling/disabling 也能完美运行（不管我在改编上述代码时可能会犯的最终错误）。

PS - 任何解决方案都必须跨浏览器并兼容 IE8。

Answer 1

通过禁用该按钮，您可以阻止 post 操作发生。因此，您要做的是禁用表单，然后使用 javascript 调用实际提交表单。可能看起来像这样：

$('.myButton').click(function() {
    $button = $(this);
    $button.attr('disabled', true);
    $button.closest('form').submit();
    setTimeout(function() {
        $button.attr('disabled', false);
    }, 2000);
});

jQuery '.click(callback)' 阻止默认事件

jQuery '.click(callback)' prevents the default event

javascript

forms

jquery

event-propagation

jquery-events