Question

如果我静态添加了以下html，则CSS样式正确应用

HTML：

<li class="connector">
   <a href="#">
      <img src="css/images/temp/connector2.png" alt="" width="192" height="192">
      <span class="sr-only">box</span>
   </a>
</li>

但是，如果我在Javascript中执行以下操作来动态呈现HTML，则CSS似乎无法应用。

JavaScript的：

element.innerHTML += "<li class='connector'>" +
                        "<a href = '/connector/" + i + "'>" +
                           "<img src ='/" + i + "/background' />" +
                           "<span class='sr-only'>" + $.get("/" + i + "/getName") +"</span>" +
                        "</a>" +
                     "</li>";

列表显示，但没有CSS样式。

有什么建议吗？

Answer 1

"<span class='sr-only'>" + $.get("/" + i + "/getName") +"</span>" +

get是异步方法。这种添加是错误的。

Answer 2

问题在于我如何使用Isotope Javascript库。我添加内容的方式是绕过它。

阅读完他们的文档后，我能够让它正常工作。

我使用以下代替

$.get("/connectorCount", function(data){
    for (var i = 0; i < data; i++)
    {
        var $newItems = $('<li class="connector"><a href = "/connector' + i + '"> <img src = "/' + i + '/background" /> <span class="sr-only">' + $.get("/" + i + "/getName") + '</span></a></li>');
        $('.connectors').isotope('insert', $newItems);
    }
    refreshSearch(data);
});

CSS样式未在Javascript中应用

2 个答案: