[英]jQuery css(“display”,“table-cell”) isn't immediately applied
<table style="border: none; margin-top: 40px; width: 100%;">
<tr>
<td id="adparser" style="width: 74.5%;"/>
<td id="thumbnailsSection" style="border: 2px solid black; display: none;">
<div style="text-align: center;">
<img src="arrow-right.png" style="border: 1px solid black; float: left; width: 16px; height: 16px;"/>
Identified Ads
</div>
<ol id="thumbnailsList" style="list-style-type: none;">
<div class="thumbnail">
<img src="https://s3.amazonaws.com/hiro-marketplace/thumb/413ce7c54ae87f9644b27a6d38790c2a.png"
style="width: 256px; height: 256px;"/><br/>
More Details<span><img src="play.png" style="width: 24px; height: 24px;"/></span>
</div>
<!-- More items... -->
</ol>
</td>
</tr>
</table>
Ok, so #thumbnailsSection starts with "display: none". 好的,因此#thumbnailsSection以“ display:none”开头。 Later:
后来:
function requestChainsButtonClicked()
{
$.ajax(
{
type: "GET",
url: "json_simple.json" + queryString,
success: function(data,status,XMLHttpRequest)
{
if (($.isArray(data))&&(data.length>0)&&($.isPlainObject(
data[0])))
{
nodeID=0;
chartConfig.nodeStructure=buildTreeNode(data[0]);
}
new Treant(chartConfig);
$(".viewCell").click(viewThumbnailsClicked);
}
});
So when the user clicks a button, the content of the first table cell is built, and when the user clicks one of the .viewCell buttons (which are part of the tree in the first cell): 因此,当用户单击按钮时,将建立第一个表格单元格的内容,并在用户单击其中一个.viewCell按钮(它们是第一个单元格树的一部分)时:
function viewThumbnailsClicked()
{
$.ajax(
{
type: "GET",
url: "thumbnails.json",
error: function(XMLHttpRequest,status,message)
{
$("#thumbnailsSection").css("display","none");
alert(status + ": " + message);
},
success: function(data,status,XMLHttpRequest)
{
var thumbnailsListSelector=$("#thumbnailsList");
thumbnailsListSelector.empty();
if ($.isArray(data))
{
for (var index=0;index<data.length;index++)
{
var thumbnailHTML="<div class=\"thumbnailItem\">";
thumbnailHTML+="<img class=\"thumbnail\" src=\"";
thumbnailHTML+=data[index].thumbUrl + "\"/><br/>";
thumbnailHTML+="More Details<span><img src=\"";
thumbnailHTML+="play.png\" class=\"details\"/>";
thumbnailHTML+="</span></div>";
thumbnailsListSelector.append(thumbnailHTML);
}
}
$("#thumbnailsSection").css("display","table-cell");
}
});
So, I would expect the second table cell (#thumbnailsSection) to appear immediately when I click the button, but it doesn't happen! 因此,我希望第二个表格单元格(#thumbnailsSection)在单击按钮时立即出现,但不会发生! Only after I click again the button that builds the first table cell, the second one is displayed.
只有在我再次单击构建第一个表格单元格的按钮之后,才会显示第二个表格单元格。
What's actually the issue? 到底是什么问题? Do I need to do some refresh on the table to see the second cell?
我是否需要刷新表才能看到第二个单元格? Thanks.
谢谢。
Try It on ajax success but I am not sure 尝试成功实现ajax,但我不确定
$("#thumbnailsSection").css("display","table-cell");
var thumbnailsListSelector=$("#thumbnailsList");
thumbnailsListSelector.empty();
if ($.isArray(data))
{
for (var index=0;index<data.length;index++)
{
var thumbnailHTML="<div class=\"thumbnailItem\">";
thumbnailHTML+="<img class=\"thumbnail\" src=\"";
thumbnailHTML+=data[index].thumbUrl + "\"/><br/>";
thumbnailHTML+="More Details<span><img src=\"";
thumbnailHTML+="play.png\" class=\"details\"/>";
thumbnailHTML+="</span></div>";
thumbnailsListSelector.append(thumbnailHTML);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.