JQuery/Ajax-在数据库调用后使用.replaceWith或.html在页面中加载新数据？

我很好奇如何让我的AJAX/JQuery用新的数据库信息更新页面

对现有问题的研究表明，这些帖子可能会有所帮助：

根据这些建议，我创建了一个PHP函数，用于处理用AJAX发送的数据。一旦成功，我就淡出旧的HTML，用新的HTML替换

问题在于，第一次单击DOM元素时不会显示来自数据库的新数据，但第二次单击时会显示。我在第二次点击时也得到了一个不需要的页面刷新

您可以在以下网址看到一个实例（我的婚礼网站）：

如果您尝试向上投票，第一次无效，第二次有效（页面重新加载除外）

我的另一个顾虑是，我不知道cache:是应该设置为“false”还是干脆忽略。问题的一部分可能是我正在加载的带有replaceWith的新HTML（我也尝试了.HTML（））对于每个表行都有相同的类和ID。我很好奇，如果我尝试替换一行，而不是整个表，并给它一个新的ID和类名，JQUERY/AJAX是否会用数据库中的新信息来替换这一新行

下面是我为AJAX使用的代码（部分基于上面的文章）：

$（文档）.ready（函数（）{
//用于提交新列表项的JQuery。
$（'input.[class$=“-箭头”]'）。单击（函数（e）{
e、 preventDefault（）；//将e放入函数中。
var ajaxurl=''；
if（$（this）.hasClass（'up-arrow'））{
变量箭头方向='向上'；
var条目=$（this.val（）；
}
else if（$（this）.hasClass（'down-arrow'））{
变量arrowdirection='向下'；
var条目=$（this.val（）；
}
var rowid='.行项目行'+'#'+条目；
风险值数据={
行动：“cb_lud_arrow_action”，
箭头：箭头方向，
entryID：入口
};
$.ajax({
cache:false，
键入：“POST”，
url:ajaxurl，
数据：数据，
成功：功能（数据）{
newtable=''；
$（'cb_lud_table'）.fadeOut（'fast'，function（）{
$（this.replaceWith（newtable.hide（））；
newtable.fadeIn（'fast'）；
});
}
});
});
});

注意：我已经确认使用AJAX发布的数据确实更新了数据库表，因此.php文件和AJAX POST方法至少工作正常

我基本上需要的是事件的时间顺序：

用户对表中的一行进行投票（单击）

数据被发送到MySQL数据库，并在正确的列中添加投票

如果成功，函数将从数据库中确定新值并生成新的html

旧数据淡出，新数据淡入

每个人都很快乐

---

对于我来说，这更像是一个JQuery解决方案（比如按正确的顺序排列效果，或者使用.delay（）函数），或者更像是一个AJAX解决方案，在AJAX解决方案中，我根据成功发布的数据设置回调函数，或者与缓存有关的东西，这都无关紧要。只是想让它工作。请提供帮助。

您已经对变量使用了fadeIn函数。因此它抛出一个错误newtable.fadeIn不是一个函数。您不能对变量使用fadeIn函数。为fadeIn函数指定id或类名。

使用浏览器控制台查看抛出的错误

newtable

只是一个字符串，因此不能将其用作调用jQuery方法的jQuery对象。这会在控制台中抛出错误，并使您的代码更容易归零

在源代码视图中查看以下输出：

   newtable = '<?php 
            $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_);
            include_once "table-up-down.php";
            echo $cb_lud_new_output;
            ?>';

---

一旦你开始工作，你可能还需要重新审视你的点击处理程序是如何连接的（我还没看过）。删除旧的html也会删除附加的任何事件。使用委托给该表的

on（）

，该表现在将成为永久资产，这将弥补更改html的不足

，谢谢您的回答。我将完成提议的解决方案，并很快接受答复。太棒了！此解决方案在第一次单击后即可完美运行。见。它在第二次单击后刷新页面，我想我可以用on（）来补偿，正如您所提到的。不完全确定如何做到这一点，但这应该是一个更简单的问题。感谢您提供了详细的答案和有效的代码。您还将注意到，由于没有复制表的html，页面的源代码已大大减少。table元素不再被替换，只替换内部行，因此您可以为单击处理程序将

on（）

委托给table元素，因为table是page now中的永久资产感谢您的回答。我将仔细研究提议的解决方案，并很快接受答复。

   newtable = '<?php 
            $cb_table_code = plugins_url("list-up-down/table-up-down.php", _FILE_);
            include_once "table-up-down.php";
            echo $cb_lud_new_output;
            ?>';

     success: function(data){
           /* convert whole page returned to jquery and get inner html of the table*/
            var newRows=$(data).find('#cb_lud_table').html() 
            $('#cb_lud_table').fadeOut('fast', function(){
                 /* insert new rows*/
                $(this).html(newRows).fadeIn('fast');

            });
            }