JQuery - 函数不适用于 JSON 导入的数据

Question

我有一个应用程序，它从 JSON 导入数据并生成（通过 JQuery 的 append()）一些表示数据的 html 列表：

<ol id="iran">
    <li class="y1900"><p>Iran 1900 Revolution flag</p></li>
    <li class="y1906"><p>Iran 1906 Dictator flag</p></li>
    <li class="y1921"><p>Iran 1921 Revolution flag</p></li>
</ol>

我有一个函数 resizeFlags() （纯粹用于 UI）计算每个列表项的宽度并调整大小以适应一个屏幕。

resizeFlags() 函数在 $(document).ready() 期间调用（JSON 加载之后），并且可以很好地处理我的测试（静态）html 文件，但是当测试 html 被删除并使用 JSON 数据附加相同的 html 时不起作用 - 附加列表正确输入 DOM，但调整大小不会发生。

我有一个 resizeFlags() 的手动触发器（用于根据新的年份范围重新计算），并且可以按附加数据的预期工作。

我觉得这是我忽略的明显事情 - 我错过了什么？

编辑：

这是附加数据的代码（我已暂时将 resizeFlags() 移动到此函数中，通常在之后立即调用它：

function loadFlags() {
$.getJSON('data/flags.json',function(countriesdata){
    //for each flag
    $.each(countriesdata.countries,function(i,countries){
        $('#countries').append('<li id="'+countries.country+'">'+countries.country+'</li>')
        $('#flags').append('<ol id="'+countries.country+'"></ol>')
        $.each(countries.years,function(i,flagyears){
            $('#flags #'+countries.country).append('<li class="y'+flagyears.year+' '+flagyears.taxonomy+'"><p>'+flagyears.flagname+'</p></li>')
        });
    });
});
//resize from defaults
resizeFlags(totalYears);
}

Answer 1

您需要在 getJSON 调用完成后（即插入函数结束时）调用 resizeFlags。否则，当调整大小时这些元素将不会出现

Answer 2

追加 JSON 数据后，您需要调用 resizeFlags() 函数。

如果resizeFlags()可以在CSS中完成，那么你就不需要再次调用resizeFlags()。

Answer 3

Ajax 调用（例如 $.getJSON）是异步的。
这意味着，即使您在触发文档就绪中的 resizeFlags() 函数之前进行 JSON 调用，响应也可能尚未到达。

确保在正确的时间调用 resizeFlags() 的唯一方法是将其放入成功处理程序中，如下所示：

$.getJSON('some-url', function(data) {
  //1. do something with the data (like build the list, append elements to the DOM)
  //...
  //2. call other UI stuff, after the elements created above are inserted in the DOM
  resizeFlags();
});

仅当 JSON 响应接收得非常快时（在更多代码被执行）：

$.getJSON(...);
//some more code
resizeFlags();

Answer 4

您正在 JSON 查询的回调函数之外调用 resizeFlags(totalYears);。即使在返回 JSON 数据之前也会立即调用此函数。每个循环完成后，将该行放入 JSON 成功回调中