如果我将按钮放在 submitHandler 中，为什么我的按钮会在 jquery 中单击两次？

Question

我有一个简短的表格，你可以在这里看到http://jsfiddle.net/azxpckg5/1/

我有一个问题 - 重现它的方法是单击 save 按钮。然后会出现另一个按钮 submit。当用户点击它时 - 它会消失并且很好。但是当用户重复此过程时（再次单击 save 并再次单击 submit - 他可以看到最后一次单击重复了两次。我相信错误可能出在此处：

submitHandler: function (form) {
        alert("here!");
        $(".overlay-boxify2").toggleClass("open");
        $('#submitcForm').click(function() {
   // 
         $(".overlay-boxify2").toggleClass("open");
            alert("hegdsgsd");
        });
        return false;
    }

但老实说，我不知道如何解决它，也不知道可能是什么问题。你能帮我吗？

Answer 1

问题是因为您在每次提交表单时都将另一个点击事件处理程序附加到 #submitcForm 按钮（单击 #saveBtn 时会发生这种情况。将点击处理程序移到validate() 调用，您的代码将按您的要求运行。

$('#invoiceForm').validate({
    // settings...
});

$('#submitcForm').click(function () {
    $(".overlay-boxify2").toggleClass("open");
});

Updated fiddle

Answer 2

使用 .off() 防止在您的按钮上附加多个 click eventListener

submitHandler: function (form) {
    alert("here!");
    $(".overlay-boxify2").toggleClass("open");
    $('#submitcForm').off().click(function() { // see the use of .off()
        $(".overlay-boxify2").toggleClass("open");
        alert("hegdsgsd");
    });
    return false;
}

见more about .off()

如果我将按钮放在 submitHandler 中，为什么我的按钮会在 jquery 中单击两次？

Why does my button click twice in jquery if I put it in submitHandler?

javascript

jquery

jquery-validate