php - JQuery .submit() a FORM doesn't work -

i'm increasing system entering functionality of loading page inside div dynamically, in other words, central area of page updated. using jquery. having problem following, when submitting same form 1 has load next page via jquery-ajax send post use data on second page.

the funny thing i'm not getting pick. submit() form , in 1 case. post html below 2 situations:

in html code below warning test created within form.submit () being displayed.

    <form id="form" accept-charset="utf-8" name="frmpadrao" method="post" action="http://localhost/fwsibe/index.php/acesso/listarsistemasvalidar">         <br>         <fieldset id="tabelainfo" style="width: 560px;">             <legend style="color: #083c06;">                 <b>dados</b>             </legend>             <br>             <table id="tabelainfo">                 <tbody>                     <tr>                         <td>                             <b>sibe:* </b>                         </td>                         <td>                             <select name="slsibe">                         </td>                     </tr>                     <tr>                         <td>                             <br>                         </td>                     </tr>                     <tr>                         <td colspan="2">                             <input class="button" type="submit" value="confirmar" name="btconfirmar">                         </td>                     </tr>                 </tbody>             </table>         </fieldset>         <br>         <br>     </form> 

in second code warning. submit () not displayed, or not recognized submission form:

    <form id="form" accept-charset="utf-8" name="frmpadrao" method="post" action="http://localhost/sibe/index.php/almembal/motivoajustealm/pesquisar">         <br>         <fieldset id="tabelainfo" style="width: 560px;">             <legend style="color: #083c06;">                 <b>filtrar por:</b>             </legend>             <br>             <table id="tabelainfo">                 <tbody>                     <tr>                         <td>                             <b>subtipo produto:* </b>                         </td>                         <td>                             <select name="slsubtipo">                         </td>                     </tr>                     <tr>                         <td>                             <br>                         </td>                     </tr>                     <tr>                         <td colspan="2">                             <input class="button" type="submit" value="confirmar" name="btconfirmar">                         </td>                     </tr>                 </tbody>             </table>         </fieldset>         <br>         <br>         <div>             <a title="" onclick="window.open('http://localhost/sibe/index.php/almembal/motivoajustealm/incluir', '_blank', 'width=800,height=600,scrollbars=yes,status=yes,resizable=yes,screenx=0,screeny=0');" href="javascript:void(0);">incluir</a>         </div>         <br>         <table id="tabelainfo">             <tbody>                 <tr id="corpotabela">                     <td align="center">não existem motivos de ajuste cadastrados para esta pesquisa.</td>                 </tr>             </tbody>         </table>     </form> 

below jquery script initialized in head of page, in addition, tested other enventos $ (this). click , ok.

$(document).ready(function() {     $("#form").submit(function() {         alert("submit form"); //        alert($(this)); //        console.log($(this));   //        $.post($(this).attr("action"), $(this).serialize(), function(data) { //            $("#divcentral").html(data); //        });  //        return false;      }); }); 

could me find bug causes. submit () not recognized jquery?

edited:

i discovered source of problem. looks when component drawn page loaded jquery-ajax, event .submit() doesn't works, when page loaded default away, event works.

the problem loaded ajax, , jquery function don't recognize it. i'am creating function load central page of template ajax request file. have 2 functions, first test, , second i'am creating works $_post. jquery function well:

function carregaurl(url) {     //alert("carregaurl=" + url);     $("#divcentral").load(url);     console.log($('form').attr('name'));    }      function carregaurl2(url) {      var data = $("form").serialize();      $.ajax({         type: "post",         url: url,         data: data     }).done(function(data) {         $("#divcentral").html(data);     });  } 

what happening here, handler fires, starts alert, , form submit occurs, reloading page.

you need event handler return false if want prevent submit , stay on current page, or add alert page you're going submit.

if want stay on current page, try this:

jquery(function($){      function formsubmit(form) {         $.post(form.attr('action'), form.serialize(), function(data){             $("#some-outer-container-with-form").html(data);         });         $("#form").submit(function(){ return formsubmit(form) }); //we need rebind          return false;             }      $("#form").submit(function(){ return formsubmit( $(this) ) }); });