jQuery.tabs无load方法报错：如何重新加载Tab并初始化组件？

我使用jQuery Tabs加载不同文件，第三个Tab对应createMeeting.jsp，内含AJAX提交表单。提交成功后页面会显示“successful!!”及“Add another one”链接，需要重新加载原始表单。

由于Tab的load事件负责初始化日期选择器等组件，因此必须重新加载Tab内容，而非仅切换显示。

现有代码 #

Tab结构代码

<div id="tabs" style="border:0px;">
<ul>
    <li><a href="someFile.jsp" class="myMenu">title 1</a></li>
    <li><a href="anotherFile.jsp" class="myMenu">title 2</a></li>
    <li><a href="createMeeting.jsp" class="myMenu">title 3</a></li>
</ul>
</div>

Tab初始化代码

$('#tabs').tabs({
    cache: true,
    load: function(event, ui) {
        var active = $('#tabs').tabs( "option", "active" );
        if (active == 2){
            $('#amstart').addClass('selectedRadio');
            $( "input[type=submit]" ).button();
            theCalendar(); // 初始化日期选择器
        }           
    }
});

表单提交代码

$('#ui-tabs-3').on('click', '#submitBtn', function(event) {
    event.preventDefault();
    
    // ... 表单验证逻辑 ...

    myData =  $("#formMeeting").serialize();

    $.ajax({
        url: './meeting_details.jsp',
        type: 'POST',
        data: myData,
        success: function(data){
            $('#ui-tabs-3').html(data);
        },
        error: function (request, status, error) {
            alert(request.responseText);
        }
    });
});

提交成功后的链接代码

<a id="createAnotherMeeting" class="vacanteItem" href="createMeeting.jsp">Add another one</a>

报错的点击事件代码

尝试以下三种写法均报错Uncaught Error: Method load does not exist on jQuery.tabs：

$("#ui-tabs-3").on("click", "#createAnotherMeeting", function(e){
    e.preventDefault();
    $("#tabs").tabs("load",2); // option 1
    $("#tabs").tabs("load",$(this).attr('href')); // option 2
    $(this).parent().tabs("load",2); // option 3
});

需求：点击“Add another one”链接时，重新加载第三个Tab并完成日期选择器、按钮等组件的初始化。

原因说明 #

jQuery UI 1.9及后续版本已移除tabs("load")方法，因此直接调用会触发错误。要实现Tab内容重新加载并触发初始化逻辑，可采用以下两种方案：

方案一：清除缓存后重新激活Tab #

利用cache配置，先移除目标Tab的缓存数据，再重新激活Tab触发load事件：

$("#ui-tabs-3").on("click", "#createAnotherMeeting", function(e){
    e.preventDefault();
    const tabIndex = 2; // 第三个Tab的索引（从0开始）
    
    // 临时关闭缓存
    $("#tabs").tabs("option", "cache", false);
    // 清空Tab面板内容（可选，避免加载前显示旧内容）
    $("#tabs").tabs("option", "panels").eq(tabIndex).empty();
    // 重新激活Tab，触发load事件执行初始化
    $("#tabs").tabs("option", "active", tabIndex);
    // 恢复缓存设置（如果需要保留其他Tab的缓存）
    $("#tabs").tabs("option", "cache", true);
});

方案二：更新Tab链接并强制加载 #

通过给链接添加时间戳规避浏览器缓存，再重新激活Tab：

$("#ui-tabs-3").on("click", "#createAnotherMeeting", function(e){
    e.preventDefault();
    const tabIndex = 2;
    const tabHref = $(this).attr('href');
    
    // 添加时间戳避免浏览器缓存
    const freshHref = `${tabHref}?t=${new Date().getTime()}`;
    // 更新Tab的href属性
    $("#tabs ul li a").eq(tabIndex).attr("href", freshHref);
    
    // 临时关闭缓存
    $("#tabs").tabs("option", "cache", false);
    // 重新激活Tab触发加载和初始化
    $("#tabs").tabs("option", "active", tabIndex);
    // 恢复缓存设置
    $("#tabs").tabs("option", "cache", true);
});

可选优化：调整初始化事件 #

将初始化逻辑从load事件移到activate事件，确保每次Tab激活时都能执行初始化（包括重新加载后）：

$('#tabs').tabs({
    cache: true,
    activate: function(event, ui) {
        const active = $('#tabs').tabs("option", "active");
        if (active == 2){
            $('#amstart').addClass('selectedRadio');
            $( "input[type=submit]" ).button();
            theCalendar();
        }           
    }
});

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