javascript - 为什么禁用缓存会使我的网页正常工作？

Question

我正在创建一个表，其中包含从两个 json 文件中获取的信息。一个 json 文件是时间表，它在行中概述了事件的时间。另一个 json 文件为我提供了有关每个单元格的模态应该显示什么的信息。如果表已经被硬编码，一切正常。

但是，我有一个为我创建表格单元格的函数。当我加载页面时，单击单元格时不会出现模式。刷新后，它可以工作。第二次刷新时，它不起作用。我尝试通过 chrome 中的网络选项卡禁用缓存，但我不确定根本问题是什么，而不是禁用缓存的快速修复。我认为这可能与资源及其加载方式有关。我也尝试过推迟脚本，但这仍然给了我同样的问题。目前，在其他尝试之后，我已将所有脚本放在 body 标记的底部。我不想在这里放置很多代码，但如果您认为有必要，请告诉我。有任何想法吗？

表格片段

<div class="tabs">
    <ul class="tabs-list">
        <li class="active"><a href="#tab1">Day 1</a></li>
        <li><a href="#tab2">Day 2</a></li>
        <li><a href="#tab3">Day 3</a></li>
    </ul>
    <div id="tab1" class="tab active">
        <table id="tab01">
            <thead>
                <tr>
                    <th><div class="tzh">Time (ET)</div></th>
                    <th>Track I</th>
                    <th>Track II</th>
                    <th>Track III</th>
                    <th>Track IV</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

在模态活动之前创建表格单元格

 function createTableCells(key, id){
    tab1 = key;
    var tickerValue = tab1.ticker;
    var originalTable = document.getElementById(id).getElementsByTagName('tbody')[0];
    var tr = document.createElement("tr");
    var th = document.createElement("th");
    var td = document.createElement("td");
    $(td).attr("data-ticker", tickerValue);
    td.innerText = tab1.company;
    th.innerText = tab1.start;
    td.classList.add("pres");
    tr.appendChild(th);
    tr.appendChild(td);
    originalTable.appendChild(tr);  
}
    const request = new Request('schedule.json');
    fetch(request, { mode: "no-cors" })
        .then((r)=>{ 
            return r.json(); 
        })
        .then((dataStr)=>{
            dataStr.forEach(function (n, i){
                console.log(Object.keys(n.data));
                    n.data.tab1.forEach(function(tab1) {    
                        createTableCells(tab1, "tab01");
                    });
            });
        });

打开和显示模态信息

window.addEventListener("load", function () {
    var items = document.querySelectorAll("td:not(:empty)")
    assignTickerInfo();
    appendLinkToCellModal();
    items.forEach(function (elem) {
        elem.addEventListener("click", function () {
            showModal('modal1', 'rotate');
        });
    });
});

标签： javascriptjquerydom-events