javascript - 当我使用 JQuery 加载页面时，表单的提交不起作用

Question

我正在开发这个系统，编写它的人使用 JQuery 来提交这样的表单:

$(".btnFinalizaEnvioPedido").click(function() {
    $("#modalAvisoEnviaPedido").modal("hide");
    $("#myModalCarregando").modal('show');
    $("form[name=pedido]").submit();
});

这是他的形式:

<form class="jqtransform" method="post" name="pedido" id="form-pedido">

表单所在的这个页面在单独访问时完美运行，但我发现这种方法很丑，所以我在前一个页面中使用 JQuery 加载整个页面，但是当我这样做时，整个表单停止工作。

<script>
    $(document).ready(function() {
        $(".icon_sisconbr-icons-pedidos").click(function () {
            $("body").load("../pedido/novo.php");
        });
        $(".btnFinalizaEnvioPedido").click(function () {
            $.ajax({
                type: "POST",
                url: "../pedido/acoes.php",
                success: function (result) {
                    ...     
                }
            });
        });
    });
</script>

我不知道如何使用 AJAX 进行提交。该方法是 POST(不是 GET)。为什么当我实际使用 <a> 进入页面时提交有效/链接，当我用 JQuery 加载整个页面时不起作用？？

Answer 1

当您使用 load 时，页面的内容是在 document.ready 已经触发后创建的，因此当按钮不存在时，您的点击事件将被附加页面。

您可以使用 .on 代替 .click 附加到文档本身并指定要监听事件的元素。

$(document).on("click", ".btnFinalizaEnvioPedido", function () {
    $.ajax({
        type: "POST",
        url: "../pedido/acoes.php",
        success: function (result) {
            ...     
        }
    });
});

参见:http://api.jquery.com/on/了解更多信息