Javascript 使用jquery将外部css样式表应用于动态添加的html内容

我很难用jquery应用外部css模板来动态添加html内容。我正在使用此HTML模板和相应的css文件：

html正在添加到页面中，但我无法从multiverse模板中获取main.css文件来设置动态添加内容的样式。我使用的javascript代码如下所示：

// Paths to S3 buckets
var s3BucketURL     = "https://s3.amazonaws.com/BUCKETNAME";
var s3ThumbnailsURL = "https://s3.amazonaws.com/BUCKETNAME";
var JSONfile        = "https://s3.amazonaws.com/BUCKETNAME/album_covers.json";

// Dynamically add HTML for images in album display
function generateAlbumCoversHTML(){
    // AJAX request to file on S3 bucket
    $.getJSON(JSONfile, function(photos) {
        // Iterate over albums and create album cover HTML
        var htmlToAdd = '';
        for (var album in photos) {
            if (photos.hasOwnProperty(album)) {
                var photo      = photos[album].split('/');
                photo          = photo[photo.length-1];
                var fullsize   = s3BucketURL + '/' + album + '/' + photo;
                var thumbnail  = s3ThumbnailsURL + '/' + photo;
                console.log(htmlToAdd);
                var html = 
                    `<article class="thumb">` +
                        `<a href=${fullsize} class="image"><img src=${thumbnail} alt="" /></a>` +
                            `<h2>${album}</h2>`+
                     `</article>`;
                htmlToAdd += html;
            }
        }
    $("#main").append(htmlToAdd);
    })
}

//S3存储桶的路径
var s3BucketURL=”https://s3.amazonaws.com/BUCKETNAME";
变量s3ThumbnailsURL=”https://s3.amazonaws.com/BUCKETNAME";
var JSONfile=”https://s3.amazonaws.com/BUCKETNAME/album_covers.json";
//为相册显示中的图像动态添加HTML
函数generateAlbumCoversHTML（）{
//AJAX请求在S3 bucket上归档
$.getJSON（JSONfile，函数（照片）{
//迭代相册并创建相册封面HTML
var htmlToAdd=''；
用于（照片中的相册）{
if（照片。hasOwnProperty（相册））{
var photo=photos[album].split（'/'）；
照片=照片[照片长度-1]；
var fullsize=s3BucketURL+'/'+相册+'/'+照片；
var thumbnail=s3ThumbnailsURL+'/'+照片；
console.log（htmlToAdd）；
变量html=
`` +
`${album}`+
``;
htmlToAdd+=html；
}
}
$（“#main”）.append（htmlToAdd）；
})
}

我修改了multiverse html模板并删除了标记中的所有标记，以

<!-- Main -->
    <div id="main"></div>

从这里，我可以通过在HTML代码的末尾调用我的函数，将我的HTML代码附加到这个div标记中，在这里我定义了我正在使用的所有其他javascript文件

    <!-- Scripts -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/jquery.poptrox.min.js"></script>
    <script src="assets/js/skel.min.js"></script>
    <script src="assets/js/util.js"></script>
    <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
    <script src="assets/js/main.js"></script>
    <script src="assets/js/custom.js"></script>
    <script type="text/javascript">generateAlbumCoversHTML();</script>

generateAlbumCoversHTML（）；

---

---

注意：我已经检查了一些与此类似的问题的引用，但没有运气：。

CSS不关心HTML是否是动态添加的，不要担心。你的CSS要么没有加载，要么不好（你说你已经更改了模板，所以可能CSS选择器不再适用）。

CSS不关心HTML是否是动态添加的，不要担心这一点。您的CSS未加载或不好（您说您已更改了模板，因此可能CSS选择器不再适用）。

我明白您的意思，但CSS选择器似乎工作正常。如果我使用console.log（htmlToAdd）并手动复制此文本，并在index.html文档中的标记之间添加，css将按预期工作。这里有一些引号可以成为无声杀手吗？嗯，事实上，你的

a

标签就像

应该是

。是吗？看起来也不是。系统的结构。标签有问题吗？哦，我的错，

/

在

img

上，你的

a

很好。当你尝试附加它时，

htmlToAdd

的价值是什么？有点混乱，但我在附加之前做控制台时就是这样。log（htmlToAdd）：我知道你在说什么，但css选择器似乎工作正常。如果我使用console.log（htmlToAdd）并手动复制此文本，并在index.html文档中的标记之间添加，css将按预期工作。这里有一些引号可以成为无声杀手吗？嗯，事实上，你的

a

标签就像

应该是

。是吗？看起来也不是。系统的结构。标签有问题吗？哦，我的错，

/

在

img

上，你的

a

很好。当您尝试附加它时，

htmlToAdd

的价值是什么？有点混乱，但在我附加之前，当我执行console.log（htmlToAdd）时就是这样：

1个月后

将元素附加到DOM将导致重新绘制，因此您的CSS将（或应该）像静态元素一样应用到动态生成的元素。如果在文档本身的

标记中声明，请查看样式是否有效。如果这样做有效，我猜外部CSS文件的旧版本存储在缓存中，阻止浏览器加载包含这些部分样式的新版本。尝试通过添加虚假URL参数来破坏缓存，如

：o） 因此，当我从标题中删除指向外部css的标记，并在index.html文件底部的标记中手动添加所有css时，一切都按预期进行！即使在破坏缓存后，也无法正确格式化动态内容。我不介意将css保留在一个标签中，但是如果所有其他方法都失败了，至少你有一个可行的回退解决方案（！），它并没有按照预期工作，这似乎很奇怪，但这听起来真的很奇怪。同一样式表中的其他规则集是否按预期工作，或者这些样式是该文件中唯一的样式？当我使用并指向样式表时，一切看起来都很好，只是图像缩略图没有填充指定给它们的空间。当我使用标签并手动添加css时，图像缩略图看起来很棒——当我重新加载网站时，图像的大小被错误地调整了……与我使用样式表时的外观相似。所有规则集都在外部样式表中——该文件大约有2000行长。这很奇怪。我在样式表中注意到这个css行：#main.thumb>.image{css STUFF HERE}在我使用该方法处理属性时对图像没有太大影响…当我在初始加载时使用该方法时，当我开始禁用#main.thumb>.image{css STUFF HERE}中的一些属性时图像缩略图正在更改。例如，禁用和启用属性background size:cover。将元素添加到DOM将导致重新绘制，因此CSS将