【问题标题】：Adding css to dynamically created elements将css添加到动态创建的元素
【发布时间】：2014-09-15 20:17:17
【问题描述】：

我正在创建一个 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 以加载到动态创建的元素上？

【问题讨论】：

CSS 应用于动态创建的元素。其他原因导致您的问题。你有可以展示的 jsFiddle 吗？
jsfiddle.net/n9fvagbt

标签： jquery css dynamic plugins

【解决方案1】：

类名区分大小写，请尝试将包装 div 的类重命名为“rigallery”。

【讨论】：

我现在完全尴尬了。我在 CSS 中的类是小写的，这就是他们没有选择样式的原因。我要如何永远抹去它？！ :-) 感谢您了解这一点。

【解决方案2】：

我会针对插件创建的特定类。如果您在浏览器中打开开发人员视图，您可以看到插件创建的类。然后，您可以简单地将 CSS 与您感兴趣的那些类一起放入您的外部文件中。您可能还需要 !important 在您的 css 中，因为该插件可能会在创建元素时重新定义 CSS。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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');

【讨论】：

也许给图像添加一个类然后在你的函数中触发它。 $(".someClass").css("width", "100px").css("Height", "100px");
如果可能的话，我宁愿不要在 jQuery 中添加 CSS。
在 CSS 中试试。 div.rigallery ul li a > img {width:100px;height:100px;}
或 ul li a > img {width:100px!important;height:100px!important;}