Javascript .on（'；单击'；功能不总是启动-通常需要两次单击

我有一个表单验证脚本，它应该在点击提交按钮时启动。一切都很好，除了有时需要在开始之前点击提交按钮两次。事实上，只有大约20%的时间会发生，这使得诊断非常困难。发送按钮不是动态的，所以我不确定可能是什么问题。有什么问题吗非常感谢您的帮助！这将用于移动表单，因此任何其他改进的想法都将非常好。谢谢

$(document).ready(function(){
var jVal = {

    'location' : function() {

        var element = $('#location');

        var errorMsg = $('#LocationError');

        if(element.val()==0) {
            jVal.errors = true;
                errorMsg.slideDown('fast');
                element.addClass('wrong');
        } else {
            errorMsg.slideUp('fast');
                element.removeClass('wrong');
        }
    },

    'firstName' : function() {

        var element = $('#firstname');

        var errorMsg = $('#nameInfo');

        if(element.val().length < 1) {
            jVal.errors = true;
                errorMsg.slideDown('fast');
                element.addClass('wrong');
        } else {
            errorMsg.slideUp('fast');
                element.removeClass('wrong');
        }
    },

    'lastName' : function() {

        var element = $('#lastname');

        var errorMsg = $('#LastNameInfo');          

        if(element.val().length < 1) {
            jVal.errors = true;
                errorMsg.slideDown('fast');
                element.addClass('wrong');
        } else {
            errorMsg.slideUp('fast');
                element.removeClass('wrong');
        }
    },


    'email' : function() {

        var element = $('#email');

        var errorMsg = $('#EmailError');

        var patt = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        if(element.val().length < 1) {
            jVal.errors = true;
                errorMsg.html('Email is required.').slideDown('fast');
                element.addClass('wrong');
        } else if (!patt.test(element.val())) {
            jVal.errors = true;
                errorMsg.html('Please enter a valid email address.').slideDown('fast');
                element.addClass('wrong');
        } else {
            errorMsg.slideUp('fast');
                element.removeClass('wrong');
        }
    },

    'telephone' : function() {
        var element = $('#telephone');

        var errorMsg = $('#TelephoneInfo');

        var patt = /^(?:\+?1[-. ]?)?(\(\d{3}\)|\d{3})-?\d{3}-?\d{4}$/;


        if(element.val().length < 1) {
            jVal.errors = true;
                errorMsg.html('Telephone is required.').slideDown('fast');
                element.addClass('wrong');
        } else if (!patt.test(element.val())) {
            jVal.errors = true;
                errorMsg.html('Please enter a valid telephone number.').slideDown('fast');
                element.addClass('wrong');
        } else {
                errorMsg.slideUp('fast');                   
                element.removeClass('wrong');
        }
    },

    'sendIt' : function (){

        var element = $('#send'),
            submissionInfo = '<div id="SubmissionInfo" class=""></div>',
            successMSG = '<strong>Thank you for contacting us!</strong><br>An Ideal Image consultant will contact you soon!</i>',
            sending = '<i class="icon-spinner icon-spin icon-2x" style="color:#5383b4;"></i>',
            errors = $('.error');


        if($("#SubmissionInfo").length==0) {
        $(element).before(submissionInfo);
        }

        submissionInfo = $('#SubmissionInfo');


        if(!jVal.errors) {

            //form.submit();

            var form = $('#myform'),
                trackingURL = window.location.pathname+'thankyou.php';  

            submissionInfo.html(sending).fadeIn('fast');

            $.ajax({
                url: form.attr('action'),
                type: form.attr('method'),
                data: form.serialize(),
                success: function(){
                    form.get(0).reset();
                    submissionInfo.html(successMSG).addClass('success');    
                    _gaq.push(['_trackPageview',trackingURL]);
                    jVal.firePixel();                   
                }
            });

        } else {
        errors.animate({marginLeft:'+='+5},150,function(){$(this).animate({marginLeft:'-='+5},150);});

        }

    },

    'firePixel' : function() {
        //Chango
        var __chconv__ = {"conversion_id":14};
        (function() {
            if (typeof(__chconv__) == "undefined") return;
                var e = encodeURIComponent; var p = [];
            for(var i in __chconv__){p.push(e(i) + "=" + e(__chconv__[i]))}
            (new Image()).src = document.location.protocol + '//as.chango.com/conv/i;' + (new Date()).getTime() + '?' + p.join("&");
        })();

        //VWO
         if(typeof(_vis_opt_top_initialize) == "function") {
        // Code for Custom Goal: Goal #2
         _vis_opt_goal_conversion(200);
        // uncomment the following line to introduce a half second pause to ensure goal always registers with the server
        _vis_opt_pause(500);
        }
    }
};

// ====================================================== //

// Validation
$('#send').on('click', function (){
        jVal.errors = false;
        jVal.location();
        jVal.firstName();
        jVal.lastName();
        jVal.telephone();
        jVal.email();
        jVal.sendIt();
    return false;
});

$('#location').change(jVal.location);
$('#firstname').change(jVal.firstName);
$('#lastname').change(jVal.lastName);
$('#email').change(jVal.email);
$('#telephone').change(jVal.telephone);


});

您可以尝试使用：

$('#send').on('click', function (){
console.log('done a click')
...

---

以及Firebug或其他一些工具，以了解事件是否已被读取。sendIt函数之前的其他函数之一有时可能会失败。请尝试使用Firebug之类的调试工具查看发生了哪些错误。如果没有错误，请添加一些console.log行以隔离问题。

尝试将代码减少到最低限度例如隔离问题。

jQuery（）.val（）

也可能返回

null

-然后检查null上的

length

属性会抛出一个未捕获的错误（请参阅控制台）。改用

if（！element.val（））

这与

相同。length==0

，

==“”

、

==0

和其他与双等于隐式类型协同作用相比的错误值。感谢您的提示，我一定会这样做。虽然从控制台中我没有看到任何错误？可能

top:-2px；

对某些浏览器来说是个问题，或者它在另一个元素下滑动，您是否尝试添加了

z-index:+1

？也尝试用一个

div

或

span

来包装按钮，您可以使用该按钮执行

显示：内联块；位置：相对；顶部：-2px；

！（在发送之前，我想到了一个可能会破坏闭包的异常。）这种情况很少发生，很难精确定位，但当它发生时非常令人沮丧。我尝试用最少的样式重新创建它，我成功了一次，直到我第二次按下它，它才记录下单击。我知道这可能是一个愚蠢的答案，但你确定它不是你的鼠标吗？或者尝试将你的验证功能放在你的ready fu中我想我已经弄明白了。这和我的按钮样式有关。如果点击按钮的顶部2倍，点击就不会触发。

$('#send').on('click', function (){
console.log('done a click')
...