如何为jQuery动态生成的Bootstrap标签页首个元素添加active激活类

问题根源 #

你之前的方案失效的核心原因是异步请求的执行时序问题：

• 循环内调用的$.ajax是异步执行的，你在循环末尾直接把loopFinished设为true时，所有POST请求还没拿到返回结果，动态的标签DOM根本还没插入到页面中，此时执行加active类的代码找不到对应元素，自然不生效。
• DOMContentLoaded事件在页面初始静态HTML加载完成时就会触发，远早于你的动态标签生成逻辑执行，所以也找不到元素。

解决方案 #

用Promise.all监听所有异步请求的完成状态，等所有标签DOM都插入到页面后，再执行激活首个标签的操作，修改后的代码如下：

// 省略外层GET请求的其他不变代码
success: function(response){
    var namespace = response.metadata.namespace;
    var pod       = response.metadata.name;

    var upcchartCpuUrl  = "{{ env('MONITORING_CHARTS_URL') }}" + "/d-solo/330/kubernetes-pods-metrics?orgId=1&from=-6h&to=now&var-datasource=Prometheus&var-namespace="+namespace+"&var-pod="+pod+"&panelId=20";
    var upcchartMemoryUrl  = "{{ env('MONITORING_CHARTS_URL') }}" + "/d-solo/330/kubernetes-pods-metrics?orgId=1&from=-6h&to=now&var-datasource=Prometheus&var-namespace="+namespace+"&var-pod="+pod+"&panelId=18";

    $('.upcchart-cpu iframe').attr('src', upcchartCpuUrl);
    $('.upcchart-memory iframe').attr('src', upcchartMemoryUrl);

    var containers = response.spec.containers;
    // 新增：存储所有请求的Promise对象
    var ajaxRequests = [];

    for (i = 0; i < containers.length; i++) {
        var data = {};
        data.nameSpace = namespace;
        data.podName   = pod;
        data.container = containers[i].name;

        // 把每次请求的Promise push到数组里
        var req = $.ajax({
            method: 'POST',
            url: '/kubes/api/log',
            crossDomain: true,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
                "Accept": "application/json",
                "Content-Type": "application/x-www-form-urlencoded",
                "Cache-Control": "no-cache"
            },
            data: data,
            success: function(response){
                var syslogNavTabs = 
                `<li><a class="nav-link" data-toggle="tab" href="#${response.container}" aria-expanded="true"> ${response.container}</a></li>`;

                var syslogTabContent = `
                <div id="${response.container}" class="tab-pane">
                <div class="panel-body">
                <pre style="overflow-y: auto; overflow-x: auto; height: 500px;">${response.data}</pre>
                </div>
                </div>`;

                $('.syslogNavTabs').append(syslogNavTabs);
                $('.syslogTabContent').append(syslogTabContent);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });
        ajaxRequests.push(req);
    }

    // 新增：等所有请求全部完成后，激活首个标签
    Promise.all(ajaxRequests).then(function(){
        $('.syslogNavTabs .nav-link:first').addClass('active');
        $('.syslogTabContent .tab-pane:first').addClass('active');
        // 如果是Bootstrap 4+版本，tab-pane还需要加show类才能正常显示，可替换上面一行为：
        // $('.syslogTabContent .tab-pane:first').addClass('active show');
    })
}

内容的提问来源于stack exchange，提问作者code-8