javascript - 使用 AJAX 将操作附加到最后附加的行

Question

我正在使用 AJAX 将数据发送到服务器并更新当前页面，而无需重新加载。我有这个脚本:

$.ajax
        ({
            url: 'insert.php', 
            type: 'POST', 
            data: {data1: emp, data2: pos, data3: sal},
            dataType: "json", 

            success:function(data)
            {
                    var emp_n = data.emp_name;
                    var btn = '<button type="Button" id="del" name="del" class="btn btn-danger">Delete</button></a>';
                    $("#before_tr").before("<tr><td>"+data.emp_name+"</td><td>"+data.position+"</td><td>"+data.salary+"</td><td>"+btn+"</td></tr>");

            },

如您所见，我有一个删除按钮，也应该添加到同一行。但在我刷新页面之前，此按钮不会处于事件状态。我想要的是为每行的删除按钮附加类似基于 PHP 的代码的操作:

<tr id="<?php echo $row['id']; ?>">
                    <td contenteditable><?php echo $row['emp_name'] ?></td>
                    <td contenteditable><?php echo $row['position'] ?></td>
                    <td contenteditable><?php echo $row['salary'] ?></td>
                    <td><button type="Button" id="del" name="del" class="btn btn-danger">Delete</button>
                </tr>
                <?php } ?>

我尝试过以下方法:

$.ajax
        ({
            url: 'insert_with_ajax.php', //Sending variable emp, pos, and sal, into this url
            type: 'POST', //I will get variable and use them inside my PHP code using $_POST['emp']
            data: {data1: emp, data2: pos, data3: sal},//Now we can use $_POST[data1];
            dataType: "json", //JSON or HTML

            success:function(arr)
            {
                //if(data=="success")
                //{
                    //alert("Data added");
                    var emp_n = arr.emp_name;
                    var btn = '<a href="delete_id.php?id="'+emp_n+'><button type="Button" id="del" name="del" class="btn btn-danger">Delete</button></a>';
                    $("#before_tr").before("<tr><td>"+arr.emp_name+"</td><td>"+arr.position+"</td><td>"+arr.salary+"</td><td>"+btn+"</td></tr>");
                    $("#emp_name").val("");
                    $("#position").val("");
                    $("#salary").val("");
                //}
            },

我在哪里添加了这行<a href="delete_id.php?id="'+emp_n+'到以下内容:

var btn = '<a href="delete_id.php?id="'+emp_n+'><button type="Button" id="del" name="del" class="btn btn-danger">Delete</button></a>';

当我点击使用 AJAX 添加的最后一个的删除按钮时，页面转到 delete_id 但链接如下:

delete_id.php?id=

id 等于空。

所以，我正在做的事情就像我们在 Facebook 上添加一个状态，然后你直接删除它，而不需要重新加载页面。我正在努力，希望有人能提供帮助。

Answer 1

再次检查您的代码:

'<a href="delete_id.php?id="'+emp_n+'>' 
                           ^ - see? you have a closing " here.

这意味着不会向您的 href 属性添加任何值，因为它已经关闭。

正确的代码是:

'<a href="delete_id.php?id='+emp_n+'">'
                                    ^ -see? closing " moved after emp_n