Ajax load div, CSS의 일부가 작동하지 않습니다.

Question

div 콘텐츠를로드하기 위해 ajax를 사용하고 있지만 div 콘텐츠는 CSS의 CSS를 사용하지 않습니다.

예 : - 이 링크는 내 CSS에서

<a href="#" onclick="javascript:loadAjax('test.html')">Test</a> 

<div id="result"> 
<table class="tablesorter"> 
<thead> 
    <tr> 
     <th>Header 1</th><th>Header 2</th> 
    </tr> 
</thead> 
<tbody> 

    <tr><td>Record 1</td><td>Desc 1</td></tr> 
</tbody>  
</table> 
</div> 

에로드됩니다

<table class="tablesorter"> 
    <thead> 
     <tr> 
      <th>Header 1</th><th>Header 2</th> 
     </tr> 
    </thead> 
    <tbody> 

     <tr><td>Record 2</td><td>Desc 2</td></tr> 
    </tbody>  
    </table> 

: 내 인 test.html에서

table.tablesorter thead tr th, table.tablesorter tfoot tr th { 
    background-color: #e6EEEE; 
    border: 1px solid #FFF; 
    font-size: 8pt; 
    padding: 4px; 
} 

table.tablesorter thead tr .header { 
    background-image: url(bg.gif); 
    background-repeat: no-repeat; 
    background-position: center right; 
    cursor: pointer; 
} 

, 그것은 다른 레코드와 같은 테이블의

내가 직면 한 문제는 "test.html"이로드되기 전에 CSS가 정상적으로 작동한다는 것입니다. 그러나 test.html을로드하는 링크를 클릭하면 CSS 배경이 계속 표시되지만 "커서 : 포인터"및 "배경 이미지"는 더 이상 작동하지 않습니다.

제대로 작동하려면 어떻게해야합니까? 미리 감사드립니다. loadAjax 코드

추가 : 파일을 test.html를 동일한 CSS를 추가

var http_request = false; 
    function loadAjax(url, parameters) { 
     http_request = false; 
     if (window.XMLHttpRequest) { // Mozilla, Safari,... 
     http_request = new XMLHttpRequest(); 
     if (http_request.overrideMimeType) { 
      // set type accordingly to anticipated content type 
      //http_request.overrideMimeType('text/xml'); 
      http_request.overrideMimeType('text/html'); 
     } 
     } else if (window.ActiveXObject) { // IE 
     try { 
      http_request = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try { 
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) {} 
     } 
     } 
     if (!http_request) { 
     alert('Cannot create XMLHTTP instance'); 
     return false; 
     } 
     http_request.onreadystatechange = alertContents; 
     http_request.open('GET', url + parameters, true); 
     http_request.send(null); 
    } 

    function alertContents() { 
     if (http_request.readyState == 4) { 
    // alert(http_request.status); 
     if (http_request.status == 200) { 
      //alert(http_request.responseText); 
      result = http_request.responseText; 
      document.getElementById('result').innerHTML = result;    
     } else { 
      alert('There was a problem with the request.'); 
     } 
     } 
    } 

Answer 1

보십시오. 실제로 iframe을 사용하거나 다른 페이지에 페이지를 포함하는 경우 CSS는 포함 된 페이지로 캐스케이드되지 않습니다. 자체 문서로 렌더링됩니다.

업데이트 : 스타일을 적용하려면 행의 첫 번째 셀에 클래스를 추가해야 할 수도 있습니다. test.html에는 어떤 요소와도 일치하지 않으므로 CSS의 두 번째 섹션에 의해 스타일이 지정된 요소가 없습니다.

<table class="tablesorter"> 
    <thead> 
     <tr> 
      <th>Header 1</th><th>Header 2</th> 
     </tr> 
    </thead> 
    <tbody> 

     <tr><td class="header">Record 2</td><td>Desc 2</td></tr> 
    </tbody>  
    </table>