javascript - jQuery css ("display","table-cell") 不会立即应用

Question

<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>

好的，#thumbnailsS​​ection 以“display: none”开头。后来:

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

因此，当用户单击按钮时，将构建第一个表格单元格的内容，并且当用户单击其中一个 .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");
        }
    });

所以，我希望当我单击按钮时第二个表格单元格 (#thumbnailsS​​ection) 立即出现，但它没有发生!只有在我再次单击构建第一个表格单元格的按钮后，才会显示第二个表格单元格。

到底是什么问题？我是否需要刷新表格才能看到第二个单元格？谢谢。

Answer 1

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