jQuery append（）不能正常工作，只有第二次

我想通過返回JSON數組的PHP腳本收集數據後，HTMl內容追加到div中。我成功地解析了返回到字符串var的數據，其中包含我需要的所有內容，但它不會在第一次使用。檢查與螢火蟲和所有的裝載和解析瓦爾斯好吧。誰能幫忙？繼承人的完整代碼示例：第一個函數從PHP腳本中的數據...jQuery append（）不能正常工作，只有第二次

function LoadProds(idf){ 
if (idf){ 
    request = '../controllers/returnprods.php?idfamilia='+idf; 

    $.getJSON(request,function(data){ 
    if (!data.resultado){ 
    nProds = data.length; 

    for (i = 0; i < nProds; i++){ 
     htmlContent = '<div class="cartigo">\n <div class="cartigodetalhe">'; 
     h1Content = ' <h1>'+data[i].nome+'</h1>' 
     h2Content = '<h2>'+data[i].preco+'€</h2> \n</div>' 
     imgContent = '<img src="images/products/'+data[i].fullpath+'" width="183px" height="87px"> \n </div>'; 

     divproduto = htmlContent+h1Content+h2Content+imgContent; 
     sProdutos = sProdutos + divproduto; 
    } 
    ncurrPos = 0; 
} 
}); 

}else{ 
return "(empty)"; 
} 
}

第二，使用點擊（）事件加載解析數據，並改變外觀

$(".cbotaogrande").click(function(){ 
activeid = "#"+$('img[src$=".png"]').attr("id"); 
if (activeid){ 
    activeimg = $(activeid).attr("src"); 
    activeimg = activeimg.substr(0,activeimg.length - 7)+".jpg"; 
    $(activeid).attr("src", activeimg); 
} 
activebtn = $(this).attr("id"); 
activebtn ="#img"+activebtn.substr(4); 
tmpsource = $(activebtn).attr("src"); 
$(activebtn).attr("src",tmpsource.substr(0,tmpsource.length-4)+"_on.png"); 

activebtn = "cgradiente"+activebtn.substr(4); 

$(".cbotoestopo").attr("id",activebtn); 
$(".clogo").attr("id",activebtn); 

LoadProds($(this).attr("comment")); // Calls the load data function above... 


$(".cartigo").remove(); // Remove divs existentes com produtos 
if (sProdutos != ''){ 
    $("#cprodutos").append(sProdutos); 
    sProdutos = ''; 
}else{ 
    sProdutos = ''; 
} 

});

希望你能幫助我。在此先感謝

來源

2012-08-13 CJ Mendes

您需要包括這部分代碼：

$(".cartigo").remove(); // Remove divs existentes com produtos 
if (sProdutos != ''){ 
    $("#cprodutos").append(sProdutos); 
    sProdutos = ''; 
}else{ 
    sProdutos = ''; 
}

中的$.getJSON()回調您LoadProds()功能。

$.getJSON()通過異步調用來獲取您的數據。這意味着您的JavaScript代碼不會停下來，並在繼續下一行之前等待完成。因此，在您的原始代碼中，在調用LoadProds()之後，它將立即進入下一個if塊，然後您的數據被提取並且變量被設置。這就是它第二次出現的原因，因爲當你再次點擊時，數據已經被加載了。

來源

2012-08-13 16:36:13

感謝您的快速回答，但我如何解決它？我是否發出一個setTimeout（）給下一個命令以防止在執行數據之前執行它？ – 2012-08-13 16:41:43

你可以做到這一點，但不能保證工作，因爲你不知道需要多長時間才能加載..例如，如果用戶的互聯網連接速度很慢。正如我在我的回答中所說的，在for循環之後，您需要在'LoadProds（）'中包含附加代碼。（$ .getJSON（）中的函數只在數據加載後才運行） – 2012-08-13 16:50:03

Brian，非常感謝您的幫助！我在LoadProds（）函數的for循環之後包含了append（）代碼，並且所有代碼都運行良好:)。 – 2012-08-13 16:56:09

jQuery append（）不能正常工作，只有第二次

回答

相關問題