Question

现在我已经为我正在处理的这个任务组织器项目提供了几个AJAX方法 - 到目前为止我只有插入工作和删除部分工作。出于某种原因，我无法弄清楚为什么在刷新页面之前我无法删除新条目。 PHP生成的代码（从while开始的第五个回显显示我传递的ID与我的数据库taskID相关的位置）：

function generateTaskTable(){
    $con = mysql_connect('localhost', '-', '-');
    if (!$con) {
        die('Could not connect: ' . mysql_error());
    }
    mysql_select_db("tasks", $con);
    $result = mysql_query("SELECT * FROM tasks order by taskDate ASC");
    echo '<table id="task_table">';
    while($row = mysql_fetch_array($result))
    {
        $id = $row['taskID'];
        echo '<tr id="row'.$id.'">';
        echo '<td>'.convertDate($row['taskDate']).'</td>';
        echo '<td>'.$row['hours'].'</td>';
        echo '<td>'.$row['task'].'</td>';
        echo '<td><a href=""><img src="images/trash.png" class="delete" name="'.$id.'"></a>
        <a href=""><img src="images/delete.png" class="unsuccessful"></a>
        <a href=""><img src="images/check.png" class="successful"></a></td>';
        echo '</tr>';
    }
    echo '</table>';
    mysql_close($con);
}

JQuery / Ajax调用：

<script type="text/javascript">
    $(document).ready(function(){
        $('.delete').click(function(e){
            var deleteID = $(this).attr('name');
            var row = deleteID;
            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: "deleteID="+ deleteID,
                success: function(result){
                    $('#row'+row).fadeOut('fast');
                }
            });
            e.preventDefault();
        });

        $("form#submit").submit(function(e) {

            var day = $('#dayDD').val();
            var month = $('#monthDD').val();
            var year = $('#yearDD').val();
            var hours = $('#hours_text').val();
            var task = $('#task_text').val();

            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: "day=" + day + "&month=" + month + "&year=" + year + "&hours=" + hours + "&task=" + task,
                success: function(result){
                    $('#hours_text').val('');
                    $('#task_text').val('');
                    $('#task_table').append(result);
                }
            });
            e.preventDefault();
        });
    });
</script>

ajax.php：

if(isset($_POST['deleteID'])){
    deleteTask($_POST['deleteID']); 
}

if (isset($_POST['task'])&& isset($_POST['hours'])){
    $newID = insertTask();
    $month = $_POST['month'];
    $day = $_POST['day'];
    $year = $_POST['year'];
    $task = $_POST['task'];
    $hours = $_POST['hours'];
    $day = str_pad($day, 2, "0", STR_PAD_LEFT);

    echo'<tr id="row'.$newID.'"><td>'.$month.' '.$day.', '.$year.'</td><td>'.$hours.'</td><td>'.$task.'</td><td><a href=""><img src="images/trash.png" class="delete" name="'.$newID.'"></a><a href=""><img src="images/delete.png" class="unsuccessful"></a><a href=""><img src="images/check.png" class="successful"></a></td></tr>';
}

ajax.php的底部显示了返回AJAX调用的代码。当我查看生成的源时，一旦添加新条目，新生成的ID就正确并正确分配给图像名称 - 但它无法正常工作。除了从表格和数据库中删除之外，页面才会刷新，并且在您再次单击图像之前不会删除该项目。我还注意到图标对齐略有偏差，我不明白为什么，因为生成的源显示的格式与所有其他表项完全相同。

删除功能：

function deleteTask($id){
    $con = mysql_connect('localhost', '-', '-');
    if (!$con) {
        die('Could not connect: ' . mysql_error());
    }

    mysql_select_db("tasks", $con);
    $result = mysql_query("DELETE FROM tasks WHERE taskID=$id");
    mysql_close($con);
}

编辑：好的，我想我可能会因为查看其他一些Stack Overflow帖子而知道这出现了什么问题 - 也许我的JQuery $('.delete').click函数无效，因为它只在document.ready触发时运行。 PHP生成的JQuery返回并在页面上创建另一个表元素具有正确的ID标记以便被删除但是document.ready已经使用“delete”类可点击的元素（只是不是新的）。这可能吗？如果是这样，我该如何解决这个问题呢？谢谢！

Answer 1

只需在e.stopPropagation();处理程序中为onClick

元素添加.delete

Answer 2

想出来。只需添加$(".delete").live('click',function(e){即可将事件绑定到动态元素。

Answer 3

由于垃圾按钮周围的链接<a href="">，您的页面会刷新。试试

javascript:void(0);

作为

<td><a href="javascript:void(0)"><img src="images/trash.png" class="delete" name="'.$id.'"></a>

Answer 4

在AJAX中使用GET而不是POST，只需删除帖子和数据位并将URL设置为：

url: "ajax.php?deleteID=" + deleteID

当然，还要更新删除php以使用$ _GET而不是$ _POST。

使用AJAX删除表/数据库项时出现问题

4 个答案: