Javascript jQuery:Button仅在单击两次后提交表单

我正在做一个表单验证函数，如果没有空的输入，那么按钮需要点击两下才能正常工作

这是我的职责：

function validate(root, animation, error) {
    $('.button').on('click', function(event) {
        event.preventDefault()

        var isEmpty    = false,
            root       = $(root),
            animation  = animation ? animation : 'animation animation-shake',
            error      = error ? error : 'error';

        root.find('form').find('.required').each(function() {
            if ($(this).val().length == 0) {
                isEmpty = true;
                root.addClass(animation);
                $('.required.error:first').focus();
                $(this).addClass(error).on('keydown', function() {
                    $(this).removeClass(error);
                    root.removeClass(animation);
                });
            }
        });

        if (isEmpty) return;
        $(this).unbind('click');
    });
}

validate('#login-box .box');

调用函数的代码：

function validate(root, animation, error) {
    $('.button').on('click', function(event) {
        event.preventDefault()

        var isEmpty    = false,
            root       = $(root),
            animation  = animation ? animation : 'animation animation-shake',
            error      = error ? error : 'error';

        root.find('form').find('.required').each(function() {
            if ($(this).val().length == 0) {
                isEmpty = true;
                root.addClass(animation);
                $('.required.error:first').focus();
                $(this).addClass(error).on('keydown', function() {
                    $(this).removeClass(error);
                    root.removeClass(animation);
                });
            }
        });

        if (isEmpty) return;
        $(this).unbind('click');
    });
}

validate('#login-box .box');

---

任何想法都很好，还有关于如何缩短/改进代码的建议。

您正在将单击事件绑定到validate函数中的按钮，这就是为什么它需要2次单击 首先单击绑定单击事件，然后第二次单击触发其中的代码。 从代码中删除单击事件。

您的方法应该是：

function validate(root, animation, error) {
    $('.button').on('click', function(event) {
        /* event.preventDefault();*/ //<< remove it
        var isEmpty    = false,
           /*...*/
        /*if (isEmpty) return;
          $(this).unbind('click');*/ //<< remove it

        // and set at handler bottom   
        if (isEmpty) event.preventDefault();
    });
}

函数验证（根、动画、错误）{
$（'.button'）。在（'click'，函数（事件）{
/*event.preventDefault（）；*///预期的行为是什么？在
if（isEmpty）{…}内设置
event.preventDefault（）
block。不需要返回语句，也不需要取消绑定click事件
error=error | | |“error”；
执行与
error=error？error:“error”；
相同的操作，您可能需要将onkeyup hander从onclick处理程序中取出。.创建一个jsfiddle@tewathia谢谢你的建议，已经实施了。甚至在这成为一项功能之前n、 结果是一样的。它在哪里说从按钮单击调用了
validate（..）
？@freedomn-m。我认为$（'.button'）。click（）被添加到了validate函数中…请检查我是否没有错是的，但您声明了“first click绑定单击事件”-即，
validate
是从一个没有证据的点击事件调用的（很可能是从
$（）
调用的）@freedomn-m ohh…对不起，我的英语不好