Question

这是关于渲染semantic-ui css的行为。

在HTML页面中（称之为index.html）我有一个像这样的postloader：

$(document).ready(function(){
    $("#content").load("/not-here.php", function (response, status, xhr) {
        if (status == "error") {
            var html = "<div class=\"ui large message\">" +
                       "<h1 class=\"ui huge header\">Error " + xhr.status  + " " + xhr.statusText + "</h1>" +
                       "<p>Unfortunately an error happened. We're sorry for that.</p>" +
                       "<a href=\"\" class=\"ui blue button\">View navbar docs &raquo;</a></div></div>";
            $("#content").html(html);
        }
    });
});

这将填补这个DOM元素的内容：

<div class="row">
   <div id="content" class="column padding-reset"></div>
</div>

它实际产生的是：

<div class="row">
   <div id="content" class="column padding-reset">
      <div class="ui large message">
         <h1 class="ui huge header">Error 404 Not Found</h1>
         <p>Unfortunately an error happened. We're sorry for that.</p>
         <a href="" class="ui blue button">View navbar docs »</a>
      </div>
   </div>
</div>

问题是，javascript加载的内容没有以全宽（从行类继承）呈现。在语义上只有一两列宽的语言。但是如果我静态填充内容（使用与通过Javascript函数生成的相同的DOM结构进行硬编码），则使用完整的内容进行渲染。我使用FF和Chrome进行开发。

因为到目前为止它是纯CSS，新的动态加载元素的行为是否应该与静态元素完全相同？

Answer 1

愚蠢的我......

我在这里放置了加载器功能的脚本：

<div class="row">
   <div id="content" class="column padding-reset"></div>
   <script type="text/javascript">...</script> <!-- not a good choice -->
</div>

如果我把它放在页脚的某个地方，那么一切似乎都很好。知道这实际上已经不再有问题，但为什么呢？

在postmantic-ui

1 个答案: