如何点击#plan_templates按钮时始终显示Bootstrap Modal初始内容

你的问题出在两个核心点：

• 每次点击#plan_templates时都会重复绑定.tplan的点击事件，导致事件叠加触发；
• 初始模板内容依赖的DOM元素会被后续修改，第二次获取时已经不是原始的初始内容。

下面是修正后的代码：

$(document).ready(function(){
    // 提前缓存初始的模态框模板内容，避免DOM修改后获取错误内容
    const originalModalContent = $('.modal-content').eq(0).html();

    $("#plan_templates").click(function() {
        // 重置模态框内容为初始模板
        $('.modal').find('.modal-content').html(originalModalContent);
        $(".modal").modal("show");
    });

    // 用事件委托绑定.tplan的点击事件，仅绑定一次，支持动态生成的元素
    $('.modal').on('click', '.tplan', function() {
        const index = $(".tplan").index(this);
        $('.modal').find('.modal-content').html($('.tab').eq(index).html());
    });
});

关键修改说明： #

• 页面加载时就把初始模板内容存入变量，确保每次打开模态框都能拿到最原始的初始内容；
• 将.tplan的点击事件移到外部，通过事件委托绑定在模态框容器上，既避免重复绑定问题，又能兼容动态替换后的新元素。

如果你的页面里初始模板和模态框内的内容都使用了.modal-content类，建议给初始模板添加专属类（比如template-modal-content），这样获取缓存内容时更精准，避免混淆：

const originalModalContent = $('.template-modal-content').html();

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