Ajax动态内容更新：解决页面不刷新时样式和事件失效问题

<?php
// ... 数据库连接和查询逻辑 ...

while ($row = mysqli_fetch_assoc($meals)) {
    $mealID = $row['id'];
    // 查询该餐点是否已被当前用户预订
    $sql4 = "SELECT * FROM reservation WHERE meal_id=" . $mealID . " AND recipient_id=" . $_SESSION['recipient_id'];
    $res4 = mysqli_query($con, $sql4);
    $isReserved = mysqli_num_rows($res4) > 0;
    $mealName = htmlspecialchars($row['name']);
    $mealQty = $row['qty']; // 假设有数量字段

    echo '<tr id="item-' . $mealID . '">'; // 关键：将餐点ID作为行的唯一ID
    echo '<td class="mealName">';
    $mealLinkClass = $isReserved ? 'highlight-green' : ''; // 初始样式
    echo '<a class="' . $mealLinkClass . '" href="MealInfo.php?mealID=' . $mealID . '">' . $mealName . '</a>';
    echo '</td>';

    echo '<td class="mealStatus">';
    echo $isReserved ? '已预订' : ''; // 初始状态文本
    echo '</td>';

    echo '<td class="mealOptions">';
    if ($isReserved) {
        echo '<button class="btn btn-remove">取消预订</button>'; // 初始按钮
    } else {
        if ($mealQty > 0) {
            echo '<button class="btn btn-reserve">预订</button>'; // 初始按钮
        } else {
            echo '餐点不可用';
        }
    }
    echo '</td>';
    echo '</tr>';
}
// ...
?>

#mealsList {
  width: 340px; /* 示例宽度 */
}

.highlight-green {
  background-color: #00ff00; /* 预订状态背景色 */
}

.highlight-yellow {
  background-color: yellow; /* 另一种高亮背景色，例如预订成功后短暂提示 */
}

.big {
  font-size: 200%; /* 大字体样式 */
}

/* 按钮基础样式 */
.btn {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.btn-remove {
  background-color: #f44336; /* 移除按钮红色 */
  color: white;
}

.btn-reserve {
  background-color: #4CAF50; /* 预订按钮绿色 */
  color: white;
}

$(function() { // 等同于 $(document).ready(function(){ ... });
  // 封装取消预订逻辑
  function removeItem(id) {
    $.get("rmov.php", {
        classID: id,
        html: "success" // 假设后端会返回 "success" 或其他状态
      },
      function(response) {
        if (response.trim() === "success") { // 注意：response可能包含空白字符
          console.log("取消预订成功");
          var $row = $("#item-" + id); // 获取对应的行
          $row.find(".mealName a").removeClass("highlight-green"); // 移除高亮样式
          $row.find(".mealStatus").html(""); // 清空状态文本
          // 切换按钮：文本变为“预订”，类从btn-remove变为btn-reserve
          $row.find(".mealOptions .btn").html("预订").toggleClass("btn-remove btn-reserve");
        } else {
          alert("取消预订操作失败");
        }
      });
  }

  // 封装预订逻辑
  function reserveItem(id) {
    $.get("rsv.php", {
        classID: id,
        html: "success" // 假设后端会返回 "success" 或其他状态
      },
      function(response) {
        if (response.trim() === "success") { // 注意：response可能包含空白字符
          console.log("预订成功");
          var $row = $("#item-" + id); // 获取对应的行
          // 添加高亮和字体放大样式
          $row.find(".mealName a").addClass("highlight-yellow big");
          $row.find(".mealStatus").html("已预订"); // 更新状态文本
          // 切换按钮：文本变为“取消预订”，类从btn-reserve变为btn-remove
          $row.find(".mealOptions .btn").html("取消预订").toggleClass("btn-remove btn-reserve");
        } else {
          alert("预订操作失败");
        }
      });
  }

  // 使用事件委托绑定点击事件到表格父元素
  $("#mealsList").on("click", ".btn-remove", function(event) {
    // 从父级<tr>的ID中提取餐点ID
    var mealId = $(this).closest("tr").attr("id").split("-")[1];
    removeItem(mealId);
  });

  $("#mealsList").on("click", ".btn-reserve", function(event) {
    // 从父级<tr>的ID中提取餐点ID
    var mealId = $(this).closest("tr").attr("id").split("-")[1];
    reserveItem(mealId);
  });
});