JavaScript中let变量首次赋值后模态框动态文本不更新问题求解

• 核心问题：首次调用changeStatusText方法时，HTML里的%STATUS%占位符已经被替换成了具体的enable/disable文本，第二次调用时DOM里已经不存在%STATUS%这个字符串，replace方法找不到匹配内容自然不会更新文本。
• 隐藏问题：每次点击按钮触发事件时，都会给#continue-confirm-box重复绑定click事件，多次点击后会导致changeStatus方法被触发多次。

方案1：预先存储模态框原始文本，每次替换都基于原始文本处理 #

页面加载完成后先缓存模态框的原始模板内容，每次替换都基于原始模板处理，避免占位符丢失：

// 页面初始化时缓存原始模板内容
const originalModalBody = $('#action-confirm-box div.modal-body').html();

const changeStatusText = function (value) {
    // 每次都基于原始模板替换占位符
    let statusText = originalModalBody.replace('%STATUS%', value ? 'disable' : 'enable');
    $('#action-confirm-box div.modal-body').html(statusText);
};

方案2：直接替换动态关键词 #

不需要依赖占位符，直接匹配当前文本里的enable/disable做替换：

const changeStatusText = function (value) {
    const targetText = value ? 'disable' : 'enable';
    const $modalBody = $('#action-confirm-box div.modal-body');
    $modalBody.html($modalBody.html().replace(/enable|disable/, targetText));
};

额外修复：避免事件重复绑定 #

每次绑定#continue-confirm-box的点击事件前先解绑旧事件，防止多次触发：

const operateEvents = {
    'click .btn-icon': function (e, value, row, index) {
        console.log("operateEvents  ", row);
        changeStatusText(row.enabled);
        $('#action-confirm-box').modal('show');
        // 先解绑旧事件再绑定新事件
        $('#continue-confirm-box').off('click').click(() => changeStatus(row, index));
    }
};

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