JQuery的 - 功能上JSON不起作用导入的数据

我有一个是（通过JQuery的append()）进口从JSON和生成数据的应用程序的一些HTML列表的代表数据：JQuery的 - 功能上JSON不起作用导入的数据

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

来源

2011-05-01 adnrw

请发送jQuery代码请 – 2011-05-01 12:24:47

邮政编码请。 – 2011-05-01 12:25:13

你是如何下载JSON的？你的文件只有JSON？例如$（document）.ready（）在ajax调用之后不会启动。 – regilero 2011-05-01 12:27:54

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

来源

2011-05-01 12:30:50

Ahhhh我真是个白痴。当然。谢谢！ – adnrw 2011-05-01 12:32:35

要调用resizeFlags(totalYears);之外的回调函数即使在JSON数据返回之前也会立即被调用，一旦每个循环都被调用，将该行放入JSON成功回调中

来源

2011-05-01 12:30:23 neebz

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

来源

2011-05-01 12:30:28 Toby

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

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

来源

2011-05-01 12:30:45

对于上下文，用户界面需要动画（有很多事情要做，如果突然改变，会让用户感到困惑）。目前使用JQuery的animate（）比CSS3变换更稳定，但我打算让CSS最终处理所有的动画。谢谢:) – adnrw 2011-05-01 12:34:57

JQuery的 - 功能上JSON不起作用导入的数据

回答

相关问题