Javascript로 추가 된 요소에 CSS를 적용하는 방법

내 응용 프로그램에서 일부 CSS onload를 적용한 다음 Jquery를 사용하여 일부 HTML을 추가합니다! 내 문제는 CSS가 새로 추가 된 요소에 적용되지 않는다는 것입니다. CSS가 새로 추가 된 html에 적용되는지 어떻게 확인할 수 있습니까? Javascript로 추가 된 요소에 CSS를 적용하는 방법

것은에서 참조하시기 바랍니다 jsfiddle

HTML :

<body onload="loaded()"> 
<div id="a"> 
    <div class="main">a</div> 
    <div class="main">b</div> 
    <div class="main">c</div> 
    <div class="main">d</div> 
</div> 
<input type="button" value="click Me" onclick="clickMe()" /> 
</body>

JAVASCRIPT :

function loaded() { 
    var posts = $('.main'), 
    postCount = posts.length, 
    postHalf = Math.round(postCount/2), 
    wrapHTML = '<div class="tab"></div>'; 
    posts.slice(0, postHalf).wrapAll(wrapHTML); 
    posts.slice(postHalf, postCount).wrapAll(wrapHTML); 
} 

function clickMe() { 
    $("#a").append("<div class='main'>e</div>"); 
}

CSS :

.tab { 
    width: 10%; 
    border: 1px solid black; 
    float: left; 
}

출처

2013-10-06 Robert

개발자 도구의 마크 업을 확인하면 어떤 일이 벌어 지는지 확인할 수 있습니다. – elclanrs

무슨 CSS 규칙이 UTF를 말하는거야? – PSL

새로 추가 한 요소는 클래스 0123있다그리고 CSS에는 .tab이 있으므로 새 요소에 css가 적용되지 않습니다.

달성하고자하는 바를 정확히 이해했다면 새로운 요소가 추가 된 후에 loaded() 함수를 다시 실행해야한다고 말하고 싶습니다. 그래서 새로운 div는 .tab div에 싸여 있습니다. 기존 요소에 대한 onload와 같습니다.

하지만 load() 함수를 호출하기 전에 요소를 unwrap해야합니다. 그렇지 않으면 이상한 일이 발생할 것입니다. 그래서 같이 :

function loaded() { 
    var posts = $('.main'), 
     postCount = posts.length, 
     postHalf = Math.round(postCount/2), 
     wrapHTML = '<div class="tab"></div>'; 
    posts.slice(0, postHalf).wrapAll(wrapHTML); 
    posts.slice(postHalf, postCount).wrapAll(wrapHTML); 
} 

function clickMe() { 
    $('.main').unwrap(); 
    $("#a").append("<div class='main'>e</div>"); 
    loaded(); 
}

이건 잘 작동합니다 : http://jsfiddle.net/MfSga/6/

을 게다가, HTML 내부에 온로드 onclick을 사용하지 마십시오. js 파일에서 수행하십시오.

출처

2013-10-06 23:57:29

덕분에 @ Sandro-Dzneladze 효과가있었습니다! 나는'unwrap()'에 대해 알지 못한다. – Robert

Javascript로 추가 된 요소에 CSS를 적용하는 방법

답변

관련 문제