jQuery Ajax实现餐食预约时样式不更新、动态按钮点击失效问题

问题根因 #

• 餐食样式仅刷新后才生效的根因：未预约的餐食对应的<td>标签没有设置[餐食ID]ReservedSt格式的ID，预约成功后执行的样式修改语句找不到对应DOM元素，自然无法更新样式，只有刷新页面后PHP渲染已预约餐食时才会带上对应ID和默认绿色背景。同时代码中多个未预约餐食的<tr>共用了同一个RemovedSt ID，属于DOM ID重复的错误，也会导致样式操作失效。
• 动态生成的移除按钮无法点击的根因：你用的$(".rmvJQ").click()、$(".rsvJQ").click()是直接绑定事件的写法，仅对页面初始加载时已经存在的DOM元素生效，后续Ajax动态插入的按钮不会被绑定事件，只有刷新页面后重新渲染的按钮才会被绑定上事件。

修复方案 #

第一步：修改JS事件绑定为事件委托 #

把事件绑定到页面初始就存在的父元素（此处用document通用父元素），这样动态生成的元素也能触发事件，同时修正样式操作逻辑：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<script>
$(document).ready(function(){
    // 移除按钮事件委托
    $(document).on("click", ".rmvJQ", function(){
        var classIdValue =  this.value;
        var toResvBtn = "#" + classIdValue +"toResvBtn";
        var ToRmv = "#" + classIdValue +"ToRmv";
        var ReservedSt = "#" + classIdValue + "ReservedSt";
        $.get("rmov.php", {classID : classIdValue},
        function(response){
            var opeartion = "success";
            if(response == opeartion){
                alert("取消预约失败");
            }else{
                alert("取消预约成功");
            }
            // 重置对应餐食的样式
            $(ReservedSt).css({"background-color": "white", "font-size": "100%"});
            $(ReservedSt).find('a').css('background-color', 'transparent');
            $(toResvBtn).html("<button class ='rsvJQ'  value ="+classIdValue+" >预约</button>");  
            $(ToRmv).html("");      
        });
    });
    
    // 预约按钮事件委托
    $(document).on("click", ".rsvJQ", function(){
        var classIdValue =  this.value;
        var toResevededString = "#" +classIdValue + "toResevededString";
        var tormovBtn = "#" + classIdValue + "tormovBtn";
        var ReservedSt = "#" + classIdValue + "ReservedSt";
        $.get("rsv.php", {classID : classIdValue},
        function(response){
            var opeartion = "success";
            if(response == opeartion){
                alert("预约失败");
            }else{
                alert("预约成功"); 
            }   
            // 正确更新对应餐食的样式
            $(ReservedSt).css({"background-color": "yellow", "font-size": "200%"});
            $(ReservedSt).find('a').css('background-color', '#00ff00');
            $(toResevededString).html("已预约");
            $(tormovBtn).html("<button class ='rmvJQ' value ='"+classIdValue+"' >取消预约</button>");   
        });
    });
});
</script>

第二步：修正PHP未预约餐食的DOM结构 #

补充餐食对应ReservedSt格式的ID，同时删除重复的RemovedSt ID：

// 替换原来输出未预约餐食的代码段
if($checkZ['qty']>0){
    // 补充td的ID，去掉tr的重复ID RemovedSt
    echo '<tr style="background-color:white" >'
    . '<td id="'.$remv[$i]['id'].'ReservedSt" ><a href="MealInfo.php?mealID='.$remv[$i]['id'].'">'.$remv[$i]['name'].'</a></td>'
    . '<td id= "'.$remv[$i]['id'].'toResevededString"> <button class = "rsvJQ" value = "'.$remv[$i]['id'].'" >预约</button> </td>'
    . '<td id = "'.$remv[$i]['id'].'tormovBtn"></td>'
    . '</tr>';
}

优化建议 #

当前逻辑循环餐食时每次都查询预约表，性能较差，建议提前把当前用户的所有预约餐食ID查出来存在数组中，循环餐食时直接判断ID是否在数组内即可，可大幅减少数据库查询次数。

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