jQuery unexpected refresh of page when submit an AJAX form [duplicate]

问题

This question already has answers here:

Click event doesn't work on dynamically generated elements [duplicate] (20 answers)

Closed 2 years ago.

I have a problem, with AJAX submit of forms.

I have a piece of code like that:

$("#content").html("<form id='requestInfo'>............</form");

That put in a div with id=content the piece of code that creates a form.

I have another piece of code:

$("#requestInfo").submit(function( event ) {
  event.preventDefault();
  ...code...
});

I would expect an execution of the code inside the submit() method where I can do my things with data of that form, but I get a refresh of the page, instead.

Does anyone know what could be the problem? It should be compatible with all browsers.

Thanks!

回答1:

You are creating your form dynamically thus standard event binding will not work. You need to use event delegation

$("#content").on('submit', '#requestInfo', function(evt) {
    evt.preventDefault();
});

回答2:

You have to call e.preventDefault(); and return false

$("#requestInfo").submit(function( event ) {
    // Code here
    event.preventDefault();
    return false;
});

来源：https://stackoverflow.com/questions/42169053/jquery-unexpected-refresh-of-page-when-submit-an-ajax-form