点击按钮后重新初始化已加载的jQuery Timeline函数失效如何解决

问题根因 #

jquery.timeline 首次初始化时，会在目标DOM节点上绑定实例标识、注册关联事件，同时在jQuery缓存中存储实例数据。仅用empty()清空节点内部DOM，没有销毁已绑定的插件实例时，插件检测到目标节点已存在初始化标记，会直接跳过初始化逻辑，导致重载操作不生效。

修复后完整代码 #

<script>
var timelinefunction;

$(document).ready(function() {  
    timelinefunction = function () {
        var defaultOpts = { 
            // 时间线类型可选值："bar" 条形模式 / "point" 点模式
            type: "bar"
            // 其余配置、数据源可在此处按需更新
        }   
        $("#TestTimeline").Timeline(defaultOpts);
    };      

    // 页面加载完成后首次初始化
    timelinefunction();     

    // 若提交按钮是模态框动态渲染生成的，请改用事件委托写法：
    // $(document).on("click", "#modal-edit-top-submit-btn", function () {
    $("#modal-edit-top-submit-btn").click(function() {
        // 第一步：调用官方内置destroy方法，彻底销毁已有实例、解绑关联事件
        $('#TestTimeline').Timeline('destroy');
        // 第二步：清空节点内残留的插件生成DOM
        $('#TestTimeline').empty();
        // 第三步：重新执行初始化逻辑，完成事件/数据重载
        timelinefunction();
    });
});
</script>

关键注意点 #

• 禁止跳过destroy步骤直接清空DOM：残留的实例数据会持续占用内存，同时始终阻断后续初始化逻辑
• 若点击事件完全不触发，优先检查按钮是否为动态加载元素，这类元素必须用事件委托方式绑定事件，直接用.click()无法绑定到后生成的节点上
• 需要更新时间线数据时，直接修改defaultOpts内的配置/数据源即可，不需要手动修改时间线DOM结构

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