Question

我有一个表单，在提交时，将返回成功消息和带有新ID的新表单。例如，您输入一个邮政编码来计算到某个区域的距离，然后一旦提交该表格，就会出现一个更改框。

$("#PostcodeForm").submit(function (e) {
    e.preventDefault();
    $('#PostcodeError').text(" ");
    $.ajax({
        type: "POST",
        url: "/Scripts/Scripts.php",
        data: {Type:"SavePostcode",Postcode:$('#Postcode').val(),Slug:"<?php if(isset($_GET['ID'])){echo $_GET['ID'];}else{echo "None";}?>"},
        success: function(response) {
            if(response=="Error"){
                $('#PostcodeError').text("That postcode could not be found. Please use the entire postcode and try again.");
            }else{
                $('#DistanceContent').slideUp("400", function() {
                    $('#DistanceContent').html(response).slideDown();
                });
            }

        }
    });
    return false();
});

$("#PostcodeChangeForm").submit(function (e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "/Scripts/Scripts.php",
        data: {Type:"ChangePostcode"},
        success: function(response) {
            $('#DistanceContent').slideUp("400", function() {
                $(this).html("Enter your postcode to see how far away this unit is!<br/><form method=\"post\" id=\"PostcodeForm\">Postcode: <input type=\"text\" name=\"Postcode\" id=\"Postcode\" maxlength=\"8\" /><input type=\"submit\" name=\"PostcodeSubmit\" id=\"PostcodeSubmit\" value=\"Calculate!\" /></form><span id=\"PostcodeError\"></span>").slideDown();
            });
        }
    });
    return false();
});

第一次提交内的回复是：

 "6 miles, as the crow flies, from POSTCODE.<br/><form method=\"post\" id=\"PostcodeChangeForm\"><input type=\"submit\" name=\"PostcodeChange\" id=\"PostcodeChange\" value=\"Change the Postcode!\" /></form>

我原来的html代码是：

<div class="Widget DistanceWidget">
                <span class="Title">Distance:</span>
                <span class="Content" id="DistanceContent">
                Enter your postcode to see how far away this unit is!<br/>
                    <form method="post" id="PostcodeForm">
                        Postcode: <input type="text" name="Postcode" id="Postcode" maxlength="8" />
                        <input type="submit" name="PostcodeSubmit" id="PostcodeSubmit" value="Calculate!" />
                    </form>
                    <span id="PostcodeError"></span>
                </span>
            </div>

Answer 1

要在ajax响应后绑定事件，只需使用$(document).on( ... ) Read here。

你可以这样使用

$(document).on('submit', '#PostcodeChangeForm', function(e) {
    e.preventDefault();

    //Your code
    ...
});

完整代码：

$(document).on('submit', '#PostcodeChangeForm', function (e) {
    e.preventDefault();        //Either use this or return false;
    $.ajax({
        type: "POST",
        url: "/Scripts/Scripts.php",
        data: {Type:"ChangePostcode"},
        success: function(response) {
            $('#DistanceContent').slideUp("400", function() {
                $(this).html("Enter your postcode to see how far away this unit is!<br/><form method=\"post\" id=\"PostcodeForm\">Postcode: <input type=\"text\" name=\"Postcode\" id=\"Postcode\" maxlength=\"8\" /><input type=\"submit\" name=\"PostcodeSubmit\" id=\"PostcodeSubmit\" value=\"Calculate!\" /></form><span id=\"PostcodeError\"></span>").slideDown();
            });
        }
    });
    return false();            //Either use this or e.preventDefault()
});

Answer 2

您在Ajax响应之后添加第二个表单，绑定$("#PostcodeChangeForm").submit时该元素不存在所以它不附加任何事件。添加表单时需要绑定该事件。或者您可以学习使用事件冒泡on()

后绑定

$(this).html("Enter...");
$("#PostcodeChangeForm").submit(function (e) { ...

或使用on：

$('#DistanceContent').on("submit", "#PostcodeChangeForm", function (e) {
    /* code here
});

JQuery没有处理ajax表单提交

2 个答案: