jQuery append() 无法正常工作，仅第二次

Question

在通过返回 JSON 数组的 PHP 脚本收集数据后，我试图将 HTMl 内容附加到 div 中。我成功地将返回的数据解析为包含我需要的所有内容的字符串 var，但它不会在第一次工作。使用 firebug 检查 vars 并且所有加载和解析都正常。任何人都可以帮忙吗？ 下面是完整代码的示例： 第一个函数从 php 脚本加载数据...

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

第二种，使用click()事件加载解析后的数据并改变外观

$(".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 = '';
}

});

希望你能帮助我。 提前致谢

Answer 1

您需要包含这部分代码：

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

在LoadProds() 的回调函数中$.getJSON()。

$.getJSON() 进行异步调用以获取您的数据。这意味着您的 javascript 代码不会停止并等待其完成，然后再继续下一行。因此，在您的原始代码中，在调用LoadProds() 之后，它将立即进入下一个if 块，然后再获取您的数据并设置变量。这就是为什么它似乎第二次起作用的原因，因为当您尝试再次单击时，此时数据已加载。