동적으로 생성 된 요소에 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 모두를 가지고,하지만 난 새로운 요소를 작성하면, 그들은 스타일 시트의 스타일에 적용되지 않습니다. 스타일 시트는 어떻게이에서 CSS를받을 수 있나요 플러그인에있는 HTML 페이지까지 연결되어, 나는 문서를로드 한 후 플러그인 ...

플러그인 전화

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

를 호출하고 스타일 시트는 동적으로 생성 된 요소에로드할까요?

Answer 1

클래스 이름은 대소 문자를 구분, "rigallery"로 포장 사업부의 클래스 이름을 변경하려고합니다.

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