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不起作用導入的數據

回答

相關問題