title: .on('click' function not always firing - often takes 2 clicks
body: <p>I have a form validation script, which should fire upon clicking the submit button. Everything works well, except sometimes it requires the submit button to be clicked twice before going. The fact is only happens about 20% of the time makes it really hard to diagnose. The #send button is not dynamic, so I'm not sure what the issue could be. Any help would be appreciated! This will be used on a mobile form, so any ideas for any other improvements as well would be great. Thanks!</p>
  
  <pre><code>$(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 &lt; 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 &lt; 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 &lt; 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 &lt; 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 = '&lt;div id="SubmissionInfo" class=""&gt;&lt;/div&gt;',
              successMSG = '&lt;strong&gt;Thank you for contacting us!&lt;/strong&gt;&lt;br&gt;An Ideal Image consultant will contact you soon!&lt;/i&gt;',
              sending = '&lt;i class="icon-spinner icon-spin icon-2x" style="color:#5383b4;"&gt;&lt;/i&gt;',
              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("&amp;");
          })();
  
          //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);
  
  
  });
  </code></pre>
  
  <p>EDIT: I think I figured it out that it's my button style. If I click on the top 2px of the button, the click doesn't fire. Any idea how to fix this?</p>
  
  <pre><code>.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;
  }
  </code></pre>