Javascript Ajax在我按两次submit之后就可以工作了

非常简单，这是我在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>";
[...]

itemstatusoptions
[...]
回显“$item$待添加状态”
[...]
回声“；
回声“；
回声“；
回应“新项目”；
回声“；
[...]

这是我的.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();
    });
});

$（文档）.ready（函数（）{
$（'form'）。提交（函数（事件）{
$（'#errors'）.remove（）；//删除错误文本
$（“#success”）.remove（）；//删除成功文本
var formData=$（“#newitem”）.serialize（）；
$.ajax({
键入：“POST”，
url:'process.php'，
数据：formData，
数据类型：“json”，
编码：正确
})
.完成（功能（数据）{
控制台日志（数据）；
如果（！data.success）{
$（'form'）。追加（''）；
if（data.errors.validitem）{
$（“#errors”）.append（“”+data.errors.validitem+”
”）；
}
}否则{
$（“#地址”）.append（“”+data.message+“”）；
$（“#myTable”）.load（“mypage.php#myTable”）；
}
})
.失败（功能（数据）{
控制台日志（数据）；
});
event.preventDefault（）；
});
});

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

当我第一次加载页面并按submit时，会发生以下情况：

• 通过ajax创建一个新项
• 使用新条目填充表，不进行页面刷新，但使用加载选项：

  *$（“#myTable”）.load（“mypage.php#myTable”）；*

• 总之，一切正常

注意：只有在添加表加载后，问题才会出现。

$（“#myTable”）.load（“mypage.php#myTable”）；

如果在提交后不重新加载表，提交总是有效的，只是表不会实时显示更改，我需要执行F5…这不是计划

加载完表格后，当我再次按下按钮时，除了我的成功消息消失外，什么也没有发生

在这个阶段，我需要按两次按钮。只有在第二次按submit之后，ajax才会执行ok，表中会显示创建的新项。 此行为对于所有下一次提交都是一致的。所有提交仅在第二次提交后执行

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

我只想重新加载myPage.php的一部分，因此只需要完整的表#myTable或整个div#项，以及myPage.php中的所有验证函数

---

我不想在process.php中重新创建完整的表并通过POST发送，因为我在其他论坛上看到了一些建议。

问题在这里：

$（“#myTable”）.load（“mypage.php#myTable”）；

mypage.php

是您的主页面。您只需加载一次。然后，在表中，使用该

.load（）

覆盖所有内容。这是不好的

然后，您将拥有一个全新的表，其中没有任何处理程序绑定到submit按钮。因此，单击submit按钮（第二次），表单将使用

元素的“正常行为”提交…页面将完全重新加载

作为一种可能的解决方案，我将在

表单

上使用

.load（）

…而不是

表

，如下所示：

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

但是您应该尝试

$（“#newitem”）.reset（）

，然后删除

#error

和

#success

…而不是

.load（）

---

编辑
第二节：

尝试

$（文档）。在（“提交”、“表单”、函数（事件）{

而不是

$（'form'）。提交（函数（事件）{

---

也就是说……因此，您的提交按钮将始终绑定到函数，即使它被覆盖。

仅从process.php获取数据，然后在ajax之后将该数据转换为html并附加到表中。使用

.load（）的回调函数

这样您就可以解决问题了建议的选项中有一个有效。第一次加载页面脚本时，脚本按预期工作并刷新表。第二次单击/提交什么都不发生。第三次单击表刷新并显示创建的两个项。第四次单击什么都不发生…依此类推。最后一个建议应该有效，因为您描述了这正是我所认为的。请确保它由文档就绪处理程序（

$（document）.ready（function（）{…}）；

）包装，并在不使用缓存的情况下重新加载页面（[CTRL]+[F5]）如果脚本在一个外部的.js文件中。我不想刷新页面…我的查询的目的是重新加载某个表/div id…不刷新页面！！我已经提到你的建议不起作用。我需要你在响应我的查询时付出更多的努力，注意我说的话…我理解你认为你没有我知道可能的问题是什么——你错了。你能帮忙吗？如果不能，请让别人来做。