无法在不刷新页面的情况下使用JQuery更新id

Question

我想实现一个功能，允许用户单击一个单元格并使其动态更新并将值添加到数据库中。它正在按预期工作，但如果不刷新页面或使用 location.reload()，我就无法让它工作

我想用 class = .submitChange 更改单元格（靠近底部）

<tr>
    <th scope='row'><?php echo $row['lastname'] . ", " . $row['firstname']; ?></th>
    <td><?php echo $row['phone']; ?></td>
    <td><?php echo $row['usertype']; ?></td>
    <?php
    foreach ($events_array as $event) { 
        $event_date = $event['date'];
        $employee_id = $row['id'];
        
        // Check if employee has a vacation day
        $vacation_day = false;
        foreach ($vacation_dates[$employee_id] as $vacation_date) {
            if ($vacation_date == $event_date) {
                $vacation_day = true;
                break; 
            }
        }
        
        // Check if employee is working that day
        $sql_check_worker = "SELECT * FROM Workers WHERE employee={$row['id']} AND event={$event['id']}";
        $result_check_worker = $smeConn->query($sql_check_worker);
        if ($result_check_worker->num_rows > 0) { // displays cell color if employee is working or not
            $serverSum++;
            $cellColorId = 'green-cell';
        } else {
            $cellColorId = 'yellow-cell';
        }
        ?>
        <?php if ($vacation_day) { 
            echo "<td class='vacation'></td>"; 
        } else {
            echo "<td id='$cellColorId' class='submitChange' data-eventid='{$event['id']}' data-employeeid='{$row['id']}'></td>";
        }
        ?>
    <?php } ?>
    <td><?php echo $serverSum; ?></td>
</tr>

这是我的jquery：

$(document).ready(function() {
    $('.submitChange').click(function() {
        $cellId = $(this).attr('id');
        $eventId = $(this).data('eventid');
        $employeeId = $(this).data('employeeid');
        if ($cellId === 'green-cell') {
            $action = 'remove';
        } else {
            $action = 'add';
        }
        console.log($cellId)
        $.ajax({
            url:"includes/ajax_request.php",
            method:"POST",
            data:{
                action:$action,
                eventId:$eventId,
                employeeId:$employeeId
            },
            success:function(response){
                if (response === 'removed') {
                    $(this).removeAttr('id').attr('id', 'yellow-cell'); // Remove old ID and set new one
                    alert("Employee has been removed from event!");
                } else {
                    $(this).removeAttr('id').attr('id', 'green-cell'); // Remove old ID and set new one
                    alert("Employee has been added to event!");
                }  
            }
        })
    })
});

如果相关，这是我的ajax脚本：

<?php

include("connect.php");
$action = $_POST['action'];
$eventId = $_POST['eventId'];
$employeeId = $_POST['employeeId'];

if ($action === 'remove') {
    $sql = "DELETE FROM Workers WHERE event = $eventId AND employee = $employeeId";
    $smeConn->query($sql);
    echo "removed";
} else {
    $sql = "INSERT INTO Workers (event, employee) VALUES ($eventId, $employeeId)";
    $smeConn->query($sql);
    echo "added";
}

?>

该功能正在按预期工作；数据正在添加到我的数据库中，并且单元格正在改变颜色，但是，它仅在我刷新页面后才起作用。

Answer 1

正如@grumpycrouton提到的

this

并不意味着你在这种情况下所期望的。

请尝试这样的事情：

$(document).ready(function () {
$('.submitChange').click(function (ev) {
    ev.stopPropagation();

    var cell = ev.target;
    $cellId = $(cell).attr('id');
    $eventId = $(cell).data('eventid');
    $employeeId = $(cell).data('employeeid');
    if ($cellId === 'green-cell') {
        $action = 'remove';
    } else {
        $action = 'add';
    }
    console.log($cellId)
    $.ajax({
        url: "includes/ajax_request.php",
        method: "POST",
        data: {
            action: $action,
            eventId: $eventId,
            employeeId: $employeeId
        },
        success: function (response) {
            if (response === 'removed') {
                $(cell).removeAttr('id').attr('id', 'yellow-cell'); // Remove old ID and set new one
                alert("Employee has been removed from event!");
            } else {
                $(cell).removeAttr('id').attr('id', 'green-cell'); // Remove old ID and set new one
                alert("Employee has been added to event!");
            }
        }
    })
})

});