event.preventDefault doesn't seem to work

问题

So im trying to stop a form from refreshing the page and this is the code i'm using:

$("#getName").submit(function(refresh) {
    refresh.preventDefault();
    $("#p22").fadeOut(50);
    $("#p23").fadeIn(800);
    document.getElementById("p23").innerHTML = "Oh " + userName + ", alright i wont forget that!";

})

I can't seem to get this working properly....

id = getName - is the form id

回答1:

Your question is similar to: https://stackoverflow.com/a/6462306/986160

Try this:

$("#getName").submit(function(refresh) {
    $("#p22").fadeOut(50);
    $("#p23").fadeIn(800);
    $("#p23").html("Oh " + userName + ", alright i wont forget that!");
    return false;
})

By returning false is like refresh.preventDefault() and refresh.stopPropagation() together ;) See details here: https://stackoverflow.com/a/1357151/986160

回答2:

I got this sample code of the jQuery documentation and it seems to work fine (it alert's but then doesn't link to destination.html. Everything seems fine in your code, it's probably something different you're looking for.

http://api.jquery.com/submit/

$( "#target" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="target" action="destination.html">
  <input type="text" value="Hello there">
  <input type="submit" value="Go">
</form>
<div id="other">
  Trigger the handler
</div>

回答3:

Returning false will not validate your form and your page will not be refreshed.

$("#getName").submit(function(refresh) {
    refresh.preventDefault();
    $("#p22").fadeOut(50);
    $("#p23").fadeIn(800);
    document.getElementById("p23").innerHTML = "Oh " + userName + ", alright i wont forget that!";
    return false;
})

来源：https://stackoverflow.com/questions/26381550/event-preventdefault-doesnt-seem-to-work

标签

javascript

jquery

forms

preventdefault