动态按钮绑定的预编译插入语句仅执行一次，需清浏览器缓存恢复

我为事件列表动态生成了标记用户出席状态的按钮，并给按钮绑定了EventListener，点击时执行预编译SQL语句。其中“取消出席(No)”按钮首次点击可正常向absences表插入数据，但执行No→Yes（删除对应行）→再次点击No的操作流程时，第二次点击无法向数据库插入数据。

全程无报错：我在preparedInsert.inc.php中添加了错误捕获代码，但未捕获到任何错误；添加日志后也显示流程正常。只有清除浏览器缓存后，“No”按钮才会再次生效。

本地XAMPP环境测试正常，仅线上服务器出现该问题，服务器主机也未记录相关错误日志。

同样实现方式的“确认出席(Yes)”按钮可正常重复执行，相关代码附在末尾供参考。

No按钮的事件监听逻辑 #

btn_no.addEventListener('click', (function(date_id) {
    return async function() {
        var return_value;

        var data = {
            date_id: date_id,
            user_id: user["user_id"],
            isAbsent: 1
        };
        return_value = await preparedInsert("absences", data);

        if (return_value != "") { // 处理错误
            try {alert("Error: " + JSON.parse(return_value));}
            catch {alert("Error: " + return_value);}
            return;
        }

        // .. 以下是列表中受影响日期的样式修改逻辑
    }
})(date_id));

preparedInsert JS函数实现 #

function preparedInsert(table_name, data) {
    var t = encodeURIComponent(table_name);
    var d = encodeURIComponent(JSON.stringify(data));

    return new Promise(resolve => {
        request = new XMLHttpRequest();
        request.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                resolve(this.responseText);
            }
        }
        request.open("GET", "includes/preparedInsert.inc.php?t="+t+"&d="+d);
        request.send();
    });
}

对应的preparedInsert.inc.php代码 #

<?php
    include "dbh.inc.php"; // 获取数据库连接$conn

    $table_name = $_GET["t"];
    $data       = json_decode($_GET["d"]);

    $types = "";
    $columns = "";
    $placeholders = "";
    $values = [];
    foreach ($data as $key => $value) {
        $types .= "s";
        $columns .= $key . ",";
        $placeholders .= "?,";
        $values[] = $value;
    }
    $columns = substr($columns, 0, -1); // 删除末尾逗号
    $placeholders = substr($placeholders, 0, -1); // 删除末尾逗号
    $sql = "INSERT INTO $table_name ($columns) VALUES ($placeholders)";
    // INSERT INTO table_name (column1, column2, ...) VALUES (?, ?, ...);

    try {
        $stmt = $conn->prepare($sql);
        $stmt->bind_param($types, ...$values);
        $stmt->execute();
    } catch (mysqli_sql_exception $e) {
        echo "Error: " . $e;
    }

    if ($conn->error) {echo json_encode($conn->error);}

参考：Yes按钮相关代码 #

Yes按钮的事件监听逻辑 #

btn_yes.addEventListener('click', (function(date_id) {
    return async function() {
        var absence = user["absences"][date_id];

        var condition = {absence_id: absence["absence_id"]};
        var return_value = await preparedDelete("absences", condition);

        if (return_value != "") { // 处理错误
            try {alert("Error: " + JSON.parse(return_value));}
            catch {alert("Error: " + return_value);}
            return;
        }

        // .. 以下是列表中受影响日期的样式修改逻辑
    }
})(date_id));

对应的preparedDelete.inc.php代码 #

<?php
    include "dbh.inc.php"; // 获取数据库连接$conn

    $table_name = $_GET["t"];
    $conditions = json_decode($_GET["c"]);

    $types = "";
    $placeholder_string = "";
    $values = [];
    foreach ($conditions as $key => $value) {
        $types .= "s";
        $placeholder_string .= $key . " = ? AND ";
        $values[] = $value;
    }
    $placeholder_string = substr($placeholder_string, 0, -4); // 删除末尾的AND
    $sql = "DELETE FROM $table_name WHERE $placeholder_string";
    // DELETE FROM $table_name WHERE key1 = ? AND key2 = ? AND...

    try {
        $stmt = $conn->prepare($sql);
        $stmt->bind_param($types, ...$values);
        $stmt->execute();
    } catch (mysqli_sql_exception $e) {
        echo "Fehler: " . $e;
    }

    if ($conn->error) {echo json_encode($conn->error);}

内容的提问来源于stack exchange，提问作者Bonsai