Javascript 有时会在 HTML 中加载内容，除非元素悬停在检查中

Question

我做了一个小部件。这个里面的内容是JS动态加载的。但是，有时当页面加载时，数据不会显示在小部件上，除非单击它。即使进入检查并将鼠标悬停在任何元素上也会加载元素。下面两张图片分别是点击前后。

更新 1- 单击不一定会加载数据，但在检查元素内悬停会加载数据。

更新 2 - 如果我多次调用该函数来放置数据，这似乎会得到修复。注意:我有 15 秒的计时器来调用该函数，但是如果我减少前 4 次运行的间隔，它就会修复。但是，这似乎是一种变通方法，而不是解决方案。

更新 3 - 正如建议的那样，这似乎更像是一个 css 问题创建了一个 Fiddle

这是放置数据的函数

function putData(dataSet) {
if(dataSet.length == 3) {
    document.getElementById('liveBlock').style.display = 'none';
    document.getElementById('upcomingCompletedBlock').style.display = 'block';
    for(var i=1; i<=3; i++) {
        title = dataSet[i-1].title;
        teams = title.split(' vs ');
        homeTeamName = teams[0];
        awayTeamName = teams[1];
        homeTeam = dataSet[i-1].homeTeamLogoUrl;
        awayTeam = dataSet[i-1].awayTeamLogoUrl;
        document.getElementById('botCupLogo'+i+'1').src=homeTeam;
        document.getElementById('botCupLogo'+i+'2').src=awayTeam;
        document.getElementById('botCupName'+i+'1').innerHTML=homeTeamName;
        document.getElementById('botCupName'+i+'2').innerHTML=awayTeamName;

        if(dataSet[i-1].matchStatus == 'UPCOMING') {
            var date = new Date(dataSet[i-1].startDateTime);
            document.getElementById('summaryText'+i).innerHTML = date;
        }
        else if(dataSet[i-1].matchStatus == 'COMPLETED') {
            document.getElementById('summaryText'+i).innerHTML = dataSet[i-1].summaryText;
        }
    }
}

它由从 API 获取数据的不同函数调用。数据被正确获取并传递给这个函数

Answer 1

I have made a widget. The content of this is loaded dynamically by JS.

你的意思是通过JS添加HTML内容？我敢打赌存在协调问题。也许添加此内容的函数称为 createContent，在您的 putData 函数之后触发一次或多次，并将 DOM 元素覆盖为其初始值。或者可能 putData 提前触发并且元素未加载。

This seem to get fixed if I call the function to put data multiple times.

这支持协调问题假设。

建议

• 将您的 putData 函数内容包装在 try catch 中。它将防止您的 JS 崩溃并帮助您进行调试。

  因为您正在操作无法加载或定位的 DOM 元素。像这样:

function putData(dataSet) {
    try {
        // add your code here
        return true;
    } catch (reason) {
        console.error(reason); // <-- pay attention to the console
        return false;
    }
}

• 不要随意多次调用putData。相反，当 HTML 内容准备就绪时调用它。

  例如，在 createContent 的末尾，您可以调用获取数据的函数，然后调用 putData 及其响应。另一种选择是使用自定义事件并在 createContent 结束时分派(dispatch)它。

• 在建议的函数 createContent 中，检查内容是否已加载。如果 isLoaded，则不要再次加载它。

希望对您有所帮助。