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（）不能正常工作，只有第二次

回答

相关问题