Question

我有一个表单验证脚本，单击提交按钮时会触发该脚本。一切都运作良好，除了有时它需要在去之前点击提交按钮两次。事实上只有大约20％的时间才会使诊断变得非常困难。 #send按钮不是动态的，所以我不确定问题是什么。任何帮助，将不胜感激！这将用于移动表格，因此任何其他改进的想法都会很棒。谢谢！

$(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);


});

编辑：我想我认为这是我的按钮风格。如果我单击按钮的顶部2px，则单击不会触发。知道如何解决这个问题吗？

.button {
    position: relative;
    top: -2px;
    display: inline-block;
    padding: 0 .75em 0 .75em;
    margin: 4px 0;
    height: 3.25em;
    background: #e45c5e;
    border: none;
    -webkit-box-shadow: #9f4042 0 4px 0 0;
    -moz-box-shadow: #9f4042 0 4px 0 0;
    box-shadow: #9f4042 0 4px 0 0;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
    color: #fff;
    font-size: 14px;
    line-height: 3.25;
    text-transform: uppercase;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    transition-duration: 0.1s;
    cursor: pointer;
    font-weight: normal;
    outline: 0;
}



.button:hover, .button:focus {
    background-color: #f16d6f;
}


.button:active {
    top: 0;
    background-color: #f16d6f;
    -webkit-box-shadow: #9f4042 0 2px 0 0;
    -moz-box-shadow: #9f4042 0 2px 0 0;
    box-shadow: #9f4042 0 2px 0 0;
}

Answer 1

您可以尝试使用：

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

和Firebug或其他东西知道是否已阅读该事件

Answer 2

sendIt函数之前的其他函数之一可能有时会失败。尝试使用像firebug这样的调试工具来查看发生的错误。如果没有错误，请添加一些console.log行以隔离问题。

.on（'click'功能并不总是触发 - 通常需要2次点击

2 个答案: