Warum verhindert nicht preventDefault() Umleitung bei dieser Formularübergabe?

Question

Ich habe versucht, dieses Formular mit jQuery einzureichen, aber ich kann nicht verhindern, dass es umleiten, nachdem ich es einreiche. Wo gehe ich falsch?

Meine Form vereinfacht:

<form action="http://xxxxxxx" method="post" id="myform"> 
    <input type="text" name="my_field"> 
    <a class="last">Submit<a> 
</form> 

JS:

$('.last').on('click', function() { 
    if ($('#myform').valid()) { 
    $('#myform').submit(); 
    } 

    $('#myform').on('submit', function(event) { 
    event.preventDefault(); 

    $.getJSON(
     this.action + "?callback=?", 
     $(this).serialize(), 
     function(data) { 
     if (data.Status === 400) { 
      alert(data.Message); 
      $('#noti').text(error).addClass('notice-error', function() { 
      $('.last').attr('id', '#contact-us-btn').addClass('button-error').html('Contact us'); 
      }); 
      $('#contact-us-btn').on('click', function() { 
      zE(function() { 
       zE.show(); 
      }); 
      }); 
     } else { 
      console.log(data.Message); 
      $('#step-3').slideUp(function() { 
      $('#noti').text(success).addClass('text-success'); 
      $('.next, .previous').fadeOut(); 
      $('.panel.success').slideDown(); 
      }); 
     } 
     } 
    ) 
    }); 
}); 

Answer 1

Es ist nicht die Ordnung, das Problem ist, dass das zweite Ereignis innerhalb der ersten Event-Funktion zuweisen wurde (im Grunde wäre es nach dem Klick zugeordnet werden daher die Formulareinreichung).

$('.last').on('click', function() { 
    if ($('#myform').valid()) { 
    $('#myform').submit(); 
    } 
}); 

$('#myform').on('submit', function(event) { 
    event.preventDefault(); 

    $.getJSON(
    this.action + "?callback=?", 
    $(this).serialize(), 
    function(data) { 
     if (data.Status === 400) { 
     alert(data.Message); 
     $('#noti').text(error).addClass('notice-error', function() { 
      $('.last').attr('id', '#contact-us-btn').addClass('button-error').html('Contact us'); 
     }); 
     $('#contact-us-btn').on('click', function() { 
      zE(function() { 
      zE.show(); 
      }); 
     }); 
     } else { 
     console.log(data.Message); 
     $('#step-3').slideUp(function() { 
      $('#noti').text(success).addClass('text-success'); 
      $('.next, .previous').fadeOut(); 
      $('.panel.success').slideDown(); 
     }); 
     } 
    } 
) 
}); 

Answer 2

Ich glaube, Sie nur Dinge ein wenig aus der Reihenfolge auftreten. Derzeit lösen Sie das Standardübermittlungsverhalten aus, bevor Sie den benutzerdefinierten Handler binden. So binden Sie den Handler zuerst, dann Eingeweihte einreichen:

$('#myform').on('submit', function(event) { 
    event.preventDefault(); 

    $.getJSON(
     this.action + "?callback=?", 
     $(this).serialize(), 
     function(data) { 
     if (data.Status === 400) { 
      alert(data.Message); 
      $('#noti').text(error).addClass('notice-error', function() { 
      $('.last').attr('id', '#contact-us-btn').addClass('button-error').html('Contact us'); 
      }); 
      $('#contact-us-btn').on('click', function() { 
      zE(function() { 
       zE.show(); 
      }); 
      }); 
     } else { 
      console.log(data.Message); 
      $('#step-3').slideUp(function() { 
      $('#noti').text(success).addClass('text-success'); 
      $('.next, .previous').fadeOut(); 
      $('.panel.success').slideDown(); 
      }); 
     } 
     } 
    ) 
    }); 

$('.last').on('click', function() { 
    if ($('#myform').valid()) { 
    $('#myform').submit(); 
    } 
});