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()期间（在JSON加载之后）调用$(document).ready()函数，并且在我的测试（静态）html文件中正常工作，但在删除测试html并且相同的html时不起作用使用JSON数据附加 - 附加列表正确输入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

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

Answer 2

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

Answer 3

附加JSON数据后，您需要调用resizeFlags（）函数。

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

Answer 4

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();

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

4 个答案: