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

Question

现在，我已经为我正在处理的这个任务组织器项目提供了一些 AJAX 方法——到目前为止，我只实现了插入工作和部分删除工作。由于某种原因，我不明白为什么在刷新页面之前无法删除新条目。 PHP 生成的代码(从 while 开始的第五个回显显示了我传递与数据库任务 ID 相关的 ID 的位置):

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

只需在 onClick 处理程序中为类 .delete 的元素添加 e.stopPropagation();