将css添加到动态创建的元素中

Question

我正在创建一个jQuery Gallery插件。使插件运行所需的初始标记是：

HTML

<div class="riGallery">
    <ul>
        <li><a href="http://www.example.com"><img src="img/gallery-img-1.jpg" alt="Description 1"></a></li>
        <li><a href="http://www.example.com"><img src="img/gallery-img-2.jpg" alt="Description 2"></a></li>
        <li><a href="http://www.example.com"><img src="img/gallery-img-3.jpg" alt="Description 3"></a></li>
    </ul>
</div>

调用插件后，它会动态添加使插件工作所需的其余HTML。

添加HTML后

<div class="rigallery">
    <div class="ri-display">
        <a href="http://www.example.com"><img src="img/gallery-img-1.jpg" alt="Description 1"></a>
        <button class="ri-prev" href="http://example.com"><</button>
        <button class="ri-next">></button>
    </div>
    <ul>
        <li><a href="http://www.example.com"><img src="img/gallery-img-1.jpg" alt="Description 1"></a></li>
        <li><a href="http://www.example.com"><img src="img/gallery-img-2.jpg" alt="Description 2"></a></li>
        <li><a href="http://www.example.com"><img src="img/gallery-img-3.jpg" alt="Description 3"></a></li>
    </ul>
</div>

我在外部样式表中拥有所有CSS，但是一旦我创建了新元素，它们就不会在样式表中使用样式。样式表链接到插件所在的HTML页面，我在文档加载后调用插件...

插件调用

<script>
    $(function() {
        $(".riGallery").riGallery({
            thumbWidth: 100,
            thumbHeight: 100
        });
    });
</script>

如何从样式表中获取CSS以加载动态创建的元素？

Answer 1

类名称区分大小写，请尝试将包装div的类重命名为＆＃34; rigallery＆＃34;。

Answer 2

我会定位插件创建的特定类。如果在浏览器中打开开发人员视图，则可以看到插件创建的类。然后你可以简单地将CSS放在你感兴趣的那些类的外部文件中。你可能还需要在你的css中重要，因为插件很可能在创建元素时重新定义了CSS。

Answer 3

如果正确定义了CSS选择器，样式将自动应用于所有动态创建的元素。 但是javascript事件方法不会绑定动态创建的项目。你必须在创建元素后绑定它们。

你的问题可能是js而不是css的一些问题。是你的js正在应用这些风格。如果是这样，你必须在添加元素后重新执行js函数。

Answer 4

这将以内联方式编写样式。

$("ul a > img").css("width", "100px").css("height", "100px");

或

最好设置img的宽度和高度。 http://www.w3schools.com/tags/tag_img.asp

$("ul a > img").attr('width', '100').attr('height', '100');