Добавление css в динамически создаваемые элементы

Question

Я создаю плагин галереи jQuery. Начальная разметка необходима, чтобы сделать плагин ПУСК:

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, что плагин включен, и я звоню плагин после загрузки документа ...

Plugin вызов

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

Как я могу получить CSS от таблицу стилей для загрузки динамически созданных элементов?

Answer 1

имена классов чувствительны к регистру, попробуйте переименовать класс для заворачивания дел до «rigallery».

Answer 2

Я бы нацелил конкретные классы, которые создает плагин. Вы можете увидеть классы, созданные плагином, если вы откроете представление разработчика в браузере. Затем вы можете просто поместить CSS в свой внешний файл с теми классами, которые вас интересуют. Возможно, вам также понадобится! Важно в вашем css, поскольку плагин, вероятно, переопределяет CSS при создании элементов.

Answer 3

Стили будут автоматически применены ко всем динамически созданным элементам, если вы правильно определили селекторы CSS. Но методы событий javascript не будут связываться с динамически создаваемыми элементами. вы должны привязать их после создания элементов.

Возможно, возникла проблема с js not css. Это ваш js применяет стили. Если это так, вы должны повторно выполнить функцию js после добавления элементов.

Answer 4

Это будет писать стили inline.

$("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');