解决AJAX动态内容更新后UI不刷新的问题：事件委托与前端最佳实践

<table id="mealsList">
  <thead>
    <tr>
      <caption>餐厅名称</caption>
    </tr>
    <tr>
      <th>餐品</th>
      <th>状态</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 示例餐品行 -->
    <tr id="item-1001">
      <td class="mealName">
        <a class="highlight-green" href="MealInfo.php?mealID=1001">餐品名称 1</a>
      </td>
      <td class="mealStatus">已预订</td>
      <td class="mealOptions">
        <button class="btn btn-remove">移除</button>
      </td>
    </tr>
    <tr id="item-1002">
      <td class="mealName">
        <a href="MealInfo.php?mealID=1002">餐品名称 2</a>
      </td>
      <td class="mealStatus"></td>
      <td class="mealOptions">
        <button class="btn btn-reserve">预订</button>
      </td>
    </tr>
  </tbody>
</table>

// ... 在循环内部 ...
if($row4){ // 已预订的餐品
    echo '<tr id="item-'.$resv[$i]['id'].'">';
    echo '<td class="mealName" ><a class="highlight-green" href="MealInfo.php?mealID='.$resv[$i]['id'].'">'.$resv[$i]['name'].'</a> </td>';
    echo '<td class="mealStatus">已预订</td>';
    echo '<td class="mealOptions"><button class="btn btn-remove" value = "'.$resv[$i]['id'].'" >移除</button></td>';
    echo '</tr>';
} else { // 未预订的餐品
    echo '<tr id="item-'.$remv[$i]['id'].'">';
    echo '<td class="mealName" ><a href="MealInfo.php?mealID='.$remv[$i]['id'].'">'.$remv[$i]['name'].'</a></td>';
    echo '<td class="mealStatus"></td>'; // 初始状态为空或显示“可预订”
    echo '<td class="mealOptions"> <button class="btn btn-reserve" value = "'.$remv[$i]['id'].'" >预订</button> </td>';
    echo '</tr>';
}
// ...

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

/* 预订状态的绿色高亮 */
.highlight-green {
  background-color: #00ff00;
}

/* 预订操作后的黄色高亮 */
.highlight-yellow {
  background-color: yellow;
}

/* 字体放大效果 */
.big {
  font-size: 200%;
}

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

/* 移除按钮样式 */
.btn-remove {
  background-color: #ff4d4d;
  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 === "success") { // 使用全等比较
          console.log("移除成功");
          // 移除餐品名称的绿色高亮
          $("#item-" + id + " .mealName a").removeClass("highlight-green highlight-yellow big");
          // 清空状态文本
          $("#item-" + id + " .mealStatus").html("");
          // 将按钮文本改为“预订”，并切换按钮类
          $("#item-" + id + " .mealOptions .btn")
            .html("预订")
            .removeClass("btn-remove")
            .addClass("btn-reserve");
        } else {
          alert("移除操作失败");
        }
      });
  }

  // 处理预订操作的函数
  function reserveItem(id) {
    $.get("rsv.php", {
        classID: id,
        html: "success" // 假设后端返回"success"表示成功
      },
      function(response) {
        if (response === "success") { // 使用全等比较
          console.log("预订成功");
          // 为餐品名称添加黄色高亮和放大字体
          $("#item-" + id + " .mealName a").addClass("highlight-yellow big");
          // 更新状态文本为“已预订”
          $("#item-" + id + " .mealStatus").html("已预订");
          // 将按钮文本改为“移除”，并切换按钮类
          $("#item-" + id + " .mealOptions .btn")
            .html("移除")
            .removeClass("btn-reserve")
            .addClass("btn-remove");
        } else {
          alert("预订操作失败");
        }
      });
  }

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

  // 使用事件委托绑定预订按钮的点击事件
  $("#mealsList").on("click", ".btn-reserve", function(event) {
    // 从父级<tr>的ID中提取餐品ID
    const mealId = $(this).closest("tr").attr("id").split("-")[1];
    reserveItem(mealId);
  });
});