0

我通过输入在 div 中动态加载页面的功能来增加我的系统，换句话说，页面的中心区域被更新。为此，我正在使用 JQuery。但即使我遇到以下问题，当提交相同的表单时，必须通过 JQuery-Ajax 加载下一页以发送帖子以使用第二页上的数据。

有趣的是我没有得到选择。始终且仅在一种情况下提交（）表单。我将在以下两种情况下发布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 识别？

编辑：

我已经发现了问题的根源。看起来当为 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);
    });

}
4

1 回答 1

0

这里发生的是，处理程序触发，启动警报，然后发生表单提交，有效地重新加载您的页面。

如果您想阻止此提交并停留在当前页面上，您需要您的事件处理程序返回 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) ) });
});
于 2013-07-15T11:27:04.773 回答