使用jQuery将外部CSS样式表应用于动态添加的HTML内容

Question

我很难将外部CSS模板应用于通过jquery动态添加的html内容。 我正在使用此HTML模板和相应的CSS文件： https : //html5up.net/multiverse 。

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

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

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

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

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

注意：我已经检查了几篇类似问题的参考，但运气不佳： 将加载的CSS应用于动态创建的HTML 。

Answer 1

CSS不在乎HTML是否是动态添加的，不用担心。 您的CSS要么没有加载，要么是坏的（您说过您已经更改了模板，因此CSS选择器可能不再适用了）。