JavaScript / REST - 在创建选项卡 div 元素后构建选项卡

Question

我正在使用此代码创建选项卡：http://akrabat.com/dynamic-javascript-tabs/ 它基本上根据 'tab-container' 中 'tab-content' div 的数量创建选项卡。在我的项目中，我根据从 XMLHttpRequest:

检索到的数据动态创建 'tab-content' div

window.onload = function() {

    var doSomethingAJAX = function (el, url) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.onload = function () { 

            var data = JSON.parse(xhr.responseText);
            var tasks = data.data;
            var aTags = document.getElementsByTagName("A");

            for(var h = 0; h < tasks.length; h++){

                var tabContainer = document.getElementById("tab-container");

                var divElement = document.createElement("div");
                divElement.className = 'tab-content';

                tabContainer.appendChild(divElement);

                var hOneElement = document.createElement("h1");
                hOneElement.className = 'tab';
                hOneElement.setAttribute('title', 'task' + h);
                hOneElement.innerHTML = tasks[h].name;

                divElement.appendChild(hOneElement);

                var formElement = document.createElement("form");
                formElement.className = 'taskForm';
                formElement.setAttribute('action', 'CompleteTask');
                formElement.setAttribute('method', 'post');

                divElement.appendChild(formElement);

                var taskId = tasks[h].id

                getFormProperties(taskId, h);

            }

        };
        xhr.onerror = function () { alert("error") };
        xhr.send();
    };

div 完全按照我想要的方式创建，但标签没有构建。创建选项卡的脚本此时停止：

tabContents = getChildElementsByClassName(tabContainer, 'tab-content');
    if(tabContents.length == 0)
        return;

我推测它可能与 ajax 有关。我如何确保 BuildTabs() 函数在创建所有 div 之前不会调用？

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/apitest.js"></script>
<style type="text/css" media="screen">@import "css/tabs.css";</style>
<title>Tabs and REST</title>
</head>
<body>
    <div id='tab-container'>

    </div>
    <script type="text/javascript" src="js/tabs.js"></script>
</body>
</html>

注意：我还应该补充一点，getFormProperties() 函数还包含一个 XMLHttpRequest。以防万一。

Answer 1

改变这个方法；

 xhr.onload = function () { 

        var data = JSON.parse(xhr.responseText);
        var tasks = data.data;
        var aTags = document.getElementsByTagName("A");

        for(var h = 0; h < tasks.length; h++){

            var tabContainer = document.getElementById("tab-container");

            var divElement = document.createElement("div");
            divElement.className = 'tab-content';

            tabContainer.appendChild(divElement);

            var hOneElement = document.createElement("h1");
            hOneElement.className = 'tab';
            hOneElement.setAttribute('title', 'task' + h);
            hOneElement.innerHTML = tasks[h].name;

            divElement.appendChild(hOneElement);

            var formElement = document.createElement("form");
            formElement.className = 'taskForm';
            formElement.setAttribute('action', 'CompleteTask');
            formElement.setAttribute('method', 'post');

            divElement.appendChild(formElement);

            var taskId = tasks[h].id

            getFormProperties(taskId, h);

        }
       BuildTabs();
    };

JavaScript / REST - 在创建选项卡 div 元素后构建选项卡

JavaScript / REST - Build tabs after tab div elements have been created

javascript

ajax

rest

tabs