Question

我正在尝试修改联系表单，以便在单击后禁用提交按钮五秒钟，以防止意外重复提交。

问题是禁用该按钮（通过设置其“禁用”属性）会阻止它实际提交。在它们上设置任何类型的偶数处理程序似乎都会覆盖默认操作，即使我没有使用.preventDefault（）;.

有没有办法可以将click事件处理程序绑定到一个按钮上，该按钮除了预先存在的功能外还可以运行？

这是我正在使用的代码：

 jQuery(function() {
    jQuery(":submit").on('click', function(e) {
        jQuery(this).attr('disabled','disabled');
    });
 });

Answer 1

DEMO：http://jsfiddle.net/souviiik/4AsHc/

HTML

<form action="#" id="myForm">
    <input type="text">
    <input type="submit" value="Submit" class="btnSubmit">
</form>

JQUERY

var st;

$("#myForm").on("submit", function () {
    if ($(".btnSubmit").hasClass("btnDisabled")) {
        return false;
    } else {
        alert("clicked!");
        $(".btnSubmit").addClass("btnDisabled");
        st = setInterval(enableBtn, 5000);
    }
});

function enableBtn() {
    $(".btnSubmit").removeClass("btnDisabled");
    clearInterval(st);
}

CSS

.btnSubmit {
    background: #d33;
    color: #FFF;
    border: 1px solid #d33;
}
.btnDisabled {
    background: #fefefe;
    color: #aaa;
    border: 1px solid #aaa;
}

Answer 2

如果您只想使用提交按钮一次就可以使用jquery .one（）函数

将事件处理程序放在HTML按钮上而不覆盖其默认功能？

2 个答案: