jQuery .submit（）表單不起作用

Question

我通過輸入動態在div內加載頁面的功能（換句話說，頁面的中央區域）來增加我的系統。 為此，我正在使用JQuery。 但是，即使我遇到以下問題，在提交相同的FORM時，也必須通過JQuery-Ajax加載下一頁以發送帖子以使用第二頁上的數據。

有趣的是，我沒有選擇。 始終（僅在一種情況下）提交FORM。 我將在以下兩種情況下發布HTML：

在下面的html代碼中，顯示了我在form.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>

在第二個代碼中警告。 未顯示Submit（），或無法識別的提交表單：

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

另外，在頁面的HEAD中已經正確初始化的JQuery腳本下面，還已經對其他enventos進行了$（this）測試。 單擊，一切正常。

$(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無法識別Submit（）？

編輯：

我已經發現了問題的根源。 看起來當為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) ) });
});