JQuery .submit() FORM не работает

Question

Я увеличиваю свою систему, введя функциональность загрузки страницы внутри div динамически, другими словами, центральная область страницы обновляется. Для этого я использую JQuery. Но даже если у меня возникла проблема, которая заключается в следующем: при отправке одного и того же FORM нужно загрузить следующую страницу через JQuery-Ajax, чтобы отправить сообщение, чтобы использовать данные на этой второй странице.

Самое смешное, что я не получаю выбор. Отправить() FORM всегда и только в одном случае. Я выложу HTML ниже двух ситуаций:

В html-коде ниже отображается предупреждение, которое я создал в форме .submit().

<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> 

Во втором предупреждении кода. Отправить() не отображается, или не признается формой представления:

<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> 

Ниже скрипт JQuery, который уже правильно инициализирован в голове страницы, кроме того, уже опробованные на других enventos как $ (это) , Нажмите, и все в порядке.

$(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; 

    }); 
}); 

Не могли бы вы помочь мне найти ошибку, которая вызывает. Отправить() не распознается JQuery?

Отредактировано:

я уже обнаружил источник проблемы. Похоже, что когда компонент рисуется для страницы, загруженной jquery-ajax, событие .submit() не работает, но когда страница загружается по умолчанию, событие работает.

Проблема в том, что он загружен Ajax, а функция JQuery не распознает его. Я создаю функцию для загрузки центральной страницы шаблона с помощью запроса ajax в файл. У меня есть две функции: первая для теста, вторая вторая для работы с $ _POST. Функция JQuery сейчас хорошо:

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); 
    }); 

} 

Answer 1

Что здесь происходит, является то, что обработчик срабатывает, запускает предупреждение, а затем сформировать представить происходит, эффективно перезагрузки страницы.

Вам нужно, чтобы обработчик событий возвращал false, если вы хотите предотвратить эту отправку и остаться на текущей странице, или добавить предупреждение на страницу, которую вы собираетесь с этой отправкой.

Если вы хотите, чтобы остаться на текущей странице, попробуйте следующее:

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 to rebind 
     return false;   
    } 

    $("#form").submit(function(){ return formSubmit($(this)) }); 
});