title: when attaching submit event to my form, the form is submitted with default handler
body: <p>This happens in IE and Firefox. Not in chrome.</p>
  
  <p>I have this form:</p>
  
  <pre><code>        &lt;form id="enviaEmail" method="post"&gt;
              &lt;label for="nombre"&gt;Nombre&lt;/label&gt;
              &lt;input id="nombre" type="text" name="nombre" required="" /&gt;
  
              &lt;label for="apellido"&gt;Apellido&lt;/label&gt;
              &lt;input id="apellido" type="text" name="apellido" required="" /&gt;
  
              &lt;label for="email"&gt;E-mail&lt;/label&gt;
              &lt;input id="email" type="email" name="email"  required="" /&gt;
  
              &lt;label for="telefono"&gt;Teléfono&lt;/label&gt;
              &lt;input id="telefono" type="text" name="telefono" /&gt;
  
              &lt;label for="mensaje"&gt;Comentarios&lt;/label&gt;
              &lt;textarea id="mensaje" name="mensaje" required="" &gt;&lt;/textarea&gt;
  
              &lt;input id="submit" type="submit" name="submit" value="Enviar" /&gt;
          &lt;/form&gt; 
  </code></pre>
  
  <p>And this javascrpt to attach my own event that does a post by mean of Ajax:</p>
  
  <pre><code>(function ($) {
      $(document).ready(function () {
          // ação que oculta a mensagem ao clicar no x
          $(".close").on('click', function () {
              $(this).parent().fadeOut();
          })
          // REQUISIÇÃO AJAX ENVIO DE E-MAIL
          $("#enviaEmail").on("submit", function (event) {
              event.preventDefault();
  
              // pega todos inputs
              var value = $(this).serializeArray(),
                      // objeto de dados para requisição
                      request = {
                          'option': 'com_ajax',
                          'module': 'wgajaxcontato',
                          'data': value,
                          'format': 'jsonp'
                      };
  
              // requisição ajax
              $.ajax({
                  type: 'POST',
                  data: request,
                  beforeSend: function () {
                      $('.hum_form_contact .formulario .loading').fadeIn().css('display', 'table');
                      $("#enviaEmail #submit").attr("disabled", true);
                  },
                  success: function (resposta) {
                      $("#resposta").fadeIn().html(resposta).delay(5000);
                      //$("#resposta").fadeIn().html(resposta).delay(5000).fadeOut(500);
                  },
                  complete: function () {
                      $(".hum_form_contact .formulario .loading").fadeOut().css('display', 'none');
                      $("#enviaEmail #submit").attr("disabled", false);
                      $("#nombre").val("");
                      $("#apellido").val("");
                      $("#email").val("");
                      $("#assunto").val("");
                      $("#telefono").val("");
                      $("#mensaje").val("");
                      $("#sccaptcha").val("");
                  }
              });
          });
      });
  })(jQuery);
  </code></pre>
  
  <p>The problem is that in chrome, all works perfect. That is, I fill the form and then when I press "submit" button, the form sends the post using the code in my custom event handler.</p>
  
  <p>In Firefox or IE, when I press submit button, the form is submitted using the default handler, so the whole page is reloaded. I can realize about this because if I place an alert inside my handler, it is not shown.</p>
  
  <p>What is wrong here?</p>
  
  <p>No errors are shown in console, so it seems there is no an error in the HTML or in Javascript.</p>
  
  <p>Thanks
  Jaime</p>