如何解决jQuery-函数对JSON导入的数据不起作用
|| 我有一个应用程序,该应用程序从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,flagyears){
$(\'#flags #\'+countries.country).append(\'<li class=\"y\'+flagyears.year+\' \'+flagyears.taxonomy+\'\"><p>\'+flagyears.flagname+\'</p></li>\')
});
});
});
//resize from defaults
resizeFlags(totalYears);
}
解决方法
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();
,您正在JSON查询的回调函数外部调用ѭ12。即使在返回JSON数据之前,也可以立即调用此方法。一旦完成每个循环,就将该行放入JSON成功回调中
,您需要在getJSON调用完成后(即在插入函数的末尾)调用resizeFlags。否则,在调整大小时这些元素将不存在
,附加JSON数据后,您将需要调用resizeFlags()函数。
如果resizeFlags()可以在CSS中完成,则无需再次调用resizeFlags()。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。