javascript - 按两次提交后，Ajax 就可以工作了

Question

非常简短，这是我在 myPage.php 中的 php 代码:

<div class="table-responsive" id="items">
 <table class="table" id="myTable">
  <thead><tr><th>item<th>status<th>options</thead>
   <tbody>
    [...]
    echo "<tr><td>$item<td>$status<td>to-be-added
    [...]
    echo "<tr><td colspan='3'>";
    echo "<form method='post' id='newitem'>";
    echo "<input type='hidden' id='uid' name='uid' value='$uid'>";
    echo "<div><button type='submit' class='btn btn-info' id='submitbtn'>new item</button></div>";
    echo "</form>";
[...]

这是我的 .js 文件 ajax 代码:

$(document).ready(function () {
    $('form').submit(function (event) {
        $('#errors').remove(); // remove the error text
        $('#success').remove(); // remove the success text
        var formData = $("#newitem").serialize();
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: formData,
            dataType: 'json',
            encode: true
        })
                .done(function (data) {
                    console.log(data);
                    if (!data.success) {
                        $('form').append('<div id="errors" class="alert alert-warning"></div>');
                        if (data.errors.validitem) {
                            $('#errors').append('<p>' + data.errors.validitem + '</p>');
                        }
                    } else {
                        $('#addresses').append('<div id="success" class="alert alert-success">' + data.message + '</div>');
                        $("#myTable").load("mypage.php #myTable");
                    }
                })
                .fail(function (data) {
                    console.log(data);
                });
        event.preventDefault();
    });
});

我不显示 process.php 函数，因为这不太可能是问题所在。

1. 当我第一次加载页面并按提交时，会发生以下情况:
   • 通过ajax创建一个新项目
   • 表格会填充新条目，无需刷新页面，但使用加载选项:*$("#myTable").load("mypage.php #myTable");*<
   • 总之，一切都按预期进行!

注意:只有在我添加表加载后才会出现问题。 $("#myTable").load("mypage.php #myTable"); 如果提交后没有重新加载表格，提交总是有效，只是表格不显示实时更改，我需要按 F5 ...这不是计划。

加载表格后，当我再次按下按钮时，除了成功消息消失之外，似乎没有任何反应。

在这个阶段我需要按两次按钮。只有在我第二次按下提交后，ajax 才会正常执行，并且表格会显示创建的新项目。 此行为对于所有后续提交都是一致的。全部仅在第二次提交后执行。

我需要一些帮助。发生了什么事？

我只想重新加载 myPage.php 的一部分，因此只有完整的表 #myTable 或整个 div #items，以及 myPage.php 中的所有验证功能 我不想在 process.php 中重新创建完整的表并通过 POST 发送它，因为我在其他论坛中看到了一些推荐。

Answer 1

问题在这里:$("#myTable").load("mypage.php #myTable");

mypage.php是你的主页。你加载一次。然后，在表内，您使用 .load()覆盖一切。这可不好。

然后，您将拥有一个全新的表，其中没有任何处理程序绑定(bind)到提交按钮。因此，在单击提交按钮(第二次)时，将使用 <form> 的“正常行为”提交表单。元素...页面已完全重新加载。

作为一个可能的解决方案，我会使用 .load()关于form ... 不是 table ，像这样:

$("#newitem").load("mypage.php #newitem");

但你应该尝试$("#newitem").reset()然后删除 #error和#success ...而不是那个.load() .

<小时/> 编辑
第二次授课:

尝试$(document).on("submit", "form", function (event) {
而不是$('form').submit(function (event) {

即delegation ...所以你的提交按钮总是会绑定(bind)到该函数，即使它被覆盖。