Ajax加载div，CSS不工作的一部分

Question

我使用ajax加载div内容，但div内容没有采用页面的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> 

在我的CSS：

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，它是同桌不同的记录：

<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”加载之前，CSS是好的。但是在点击假设加载test.html的链接后，CSS背景仍然显示，但“cursor：pointer”和“background-image”不再有效。

我该怎么做才能使它工作？ 在此先感谢！

添加在loadAjax代码：

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

尝试添加相同的CSS来test.html文件放在。如果您实际使用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>