如何通过AJAX刷新Modal且不丢失JavaScript绑定事件？

问题核心 #

jQuery.load()方法会自动剥离加载内容中的<script>标签，导致Modal刷新后原绑定的点击事件全部失效；同时原代码将JS逻辑嵌入循环内，依赖动态ID，无法移至外部。

修复方案：事件委托+统一类名 #

通过事件委托绑定事件到静态父元素，摆脱动态ID依赖，同时移除Modal内的冗余脚本，统一管理JS逻辑。

步骤1：修改PHP按钮代码

移除动态ID，添加统一类名和必要的data属性：

<!-- 替换原按钮代码 -->
<div class="form-group  mt-5">
    <a <?php if($exem['isConfirm']==1) echo "hidden"; ?> 
       class="btn m-2 accept-btn" 
       data-idcopy="<?= $exem['Num_Exemp'] ?>" 
       data-tmp="<?= $tmp ?>" 
       role="button">Accept</a>
    <a <?php if($exem['isConfirm']==1) echo "hidden"; ?> 
       class="btn btn-dark m-2 reject-btn" 
       data-idcopy="<?= $exem['Num_Exemp'] ?>" 
       data-tmp="<?= $tmp ?>" 
       role="button">Reject</a>
    <a <?php if($exem['isConfirm']==0) echo "hidden"; ?> 
       class="btn btn-secondary mt-4 return-btn" 
       data-idcopy="<?= $exem['Num_Exemp'] ?>" 
       data-tmp="<?= $tmp ?>"> Return </a>
</div>

步骤2：统一JS逻辑（移至页面底部/外部JS文件）

使用事件委托绑定到静态父元素（如.modal-body），无需依赖动态ID：

$(document).ready(function() {
    // 接受订单
    $('.modal-body').on('click', '.accept-btn', function() {
        const copyId = $(this).data('idcopy');
        const tmp = $(this).data('tmp');
        
        $.ajax({
            url: "<?= PROOT ?>emprunts/acceptOrder/" + copyId,
            type: "POST",
            success: function(data) {
                $("#modalContent" + tmp).load(window.location.href + " #modalContent" + tmp);
                console.log(data);
            }
        });
    });

    // 拒绝订单
    $('.modal-body').on('click', '.reject-btn', function() {
        const copyId = $(this).data('idcopy');
        const tmp = $(this).data('tmp');
        
        $.ajax({
            url: "<?= PROOT ?>emprunts/rejectOrder/" + copyId,
            type: "POST",
            success: function(data) {
                $("#modalBody" + tmp).load(window.location.href + " #modalBody" + tmp);
                console.log(data);
            }
        });
    });

    // 归还书籍
    $('.modal-body').on('click', '.return-btn', function() {
        const copyId = $(this).data('idcopy');
        const tmp = $(this).data('tmp');
        
        $.ajax({
            url: "<?= PROOT ?>emprunts/returnBook/" + copyId,
            type: "POST",
            success: function(data) {
                $("#modalBody" + tmp).load(window.location.href + " #modalBody" + tmp);
                console.log(data);
            }
        });
    });
});

原理说明

1. 事件委托：将事件绑定到页面加载时就存在的静态父元素（.modal-body），当动态生成的按钮触发事件时，事件会冒泡到父元素执行处理逻辑，不受DOM刷新影响。
2. data属性替代动态ID：通过data-idcopy传递图书ID，data-tmp标记对应Modal，避免依赖动态ID。
3. 移除冗余脚本：Modal内不再嵌入重复JS代码，彻底解决load()剥离脚本的问题。

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