如何隔离视图避免jQuery选择器搜索，实现无ID冲突多标签页？

问题根源 #

1. JS事件丢失：当前代码使用clone()方法保存标签页内容，但默认clone()不会复制元素绑定的事件处理器和数据，导致恢复标签页时JS绑定的功能失效。
2. ID冲突风险：虽然当前逻辑每次只在DOM中保留一个标签页内容，但克隆方式可能导致内存中存在重复ID元素，无法保证全局选择器不会误匹配。

解决方案：改用detach()替代clone() #

通过detach()方法保存非活跃标签页内容，该方法会将元素从DOM中移除但保留所有事件处理器、数据和DOM结构。同时确保同一时间只有活跃标签页的内容存在于DOM中，彻底避免ID冲突。

修改后的代码 #

1. 更新menuCall函数

function menuCall(url, inner_url_yn, obj){
    let $navBtnWrap = $('.navButton.tab-content-'+obj.key);
    if ($navBtnWrap.length > 0) {
        $navBtnWrap.eq(0).click();
        return;
    } // 标签已存在
    
    let currentKey = $('#menuContent').data('key');
    if(currentKey != null && typeof currentKey != "undefined") {
        // 分离当前内容，保留事件与数据
        let $currentContent = $('#menuContent').children().detach();
        $('#flex_navi_btn_area').data('content-'+currentKey, $currentContent);
    } // 保存当前屏幕状态
    
    var params = '';
    ajaxCall(url, params, function(data){
        $('#menuContent').empty();
        $('#menuContent').append(data);
        $('#menuContent').data('key', obj.key);
        addTab(url, obj);
    });
}

2. 更新selectTab函数

function selectTab($selectedTab) {
    let currentKey = $('#menuContent').data('key');
    let nextKey = $selectedTab.data('key');
    if(currentKey == nextKey) return; // 切换到当前活跃标签，直接返回
    
    // 保存当前活跃标签内容
    if(currentKey != null && typeof currentKey != "undefined") {
        let $currentContent = $('#menuContent').children().detach();
        $('#flex_navi_btn_area').data('content-'+currentKey, $currentContent);
    }
    
    // 恢复目标标签内容
    let $content = $('#flex_navi_btn_area').data('content-'+nextKey);
    if ($content != null && typeof $content != "undefined") {
        $('#menuContent').append($content);
        $('#menuContent').data('key', nextKey);
    }
    
    // 更新标签激活状态
    $('#flex_navi_btn_area .navButton').removeClass('on');
    $selectedTab.addClass('on');
}

方案优势 #

• 事件与状态完整保留：detach()不会丢失元素绑定的事件处理器和数据，恢复标签页后JS绑定的功能（如Web Grid、按钮点击）可正常工作。
• 彻底消除ID冲突：同一时间仅活跃标签页的内容存在于DOM中，全局选择器只会匹配当前活跃标签内的元素，不会出现重复ID干扰。
• 零侵入现有页面：所有调整都在框架层完成，原有内容页面的HTML和JS无需改动，完全符合需求。

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