jquery - 使用 AJAX 动态更新表行

Question

通常情况下，我是 jfGit 的忠实拥护者，但我一直在网上查找，但无法让这段代码运行。

我的设置:

• index.php - 包含由 mysql 数据库中的数据填充的表的页面。
• update.php - 一个能够在 html 中输出表格行的 PHP 脚本

意图

我想要做什么:通过单击链接或按钮，更新特定的表格行。

当前解决方案

这是我到目前为止尝试过的代码。

Ajax/jQuery 代码，就在 body 标签下方(位置正确吗？):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('a.pop').click(function() { 
var popID = $(this).attr('rel');
$.ajax({
        url: 'update.php',
        method: 'GET',
        data: 'userID=' + popID,
        success: function(returnData){
             $(popID).html(data);
              $(popID).dialog();
              alert('Load was performed.');
        }
    });
});
});
</script>

以及表代码(使用 php 打印):

echo "<div id=\"$ID\">";
// all tr + td from table
echo "<td><a href=\"#\" id=\"clickingEvent\" class=\"pop\" rel=\"$ID\">Update</a></td>\n";
echo "</tr>\n";
echo "</div>";

结果

目前，我根本没有得到任何结果，AJAX 甚至没有加载 php 页面。单击更新按钮后，没有任何反应。

任何帮助将不胜感激，提前谢谢您:)

编辑:

部分解决方案

代码的 Ajax 部分现在可以正常工作，感谢大家的输入!

现在发生的情况是，它在表格标记前面添加一个新行，而旧行仍然保留。当我查看生成的源时，它显示有一个新行，其 div id 为我指定的“popID”。向下滚动，似乎旧行的 div 标签已被删除。

有什么办法可以解决这个问题吗？

Answer 1

尝试用此替换 ajax 函数:

$.get('update.php',{userID: popID}, function(data) {
       $("#" + popID).html(data);
       $("#" + popID).dialog();
       alert('Load was performed.');
});

此外，不要使用 $("a.pop").click(...)，而是使用: $(document).on('click', 'a. pop', function () { ...});

这将为您提供返回相同 jQuery 事件的新按钮