Ajax charge div, une partie de CSS ne fonctionne pas

Question

J'utilise l'ajax pour charger un contenu div, mais le contenu div ne prend pas le CSS de la page.

Exemple: - Ce lien se charger dans

<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> 

Dans mon 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; 
} 

Dans mon test.html, c'est la même table avec enregistrement différent:

<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> 

Le problème auquel je suis confronté est qu'avant que "test.html" soit chargé, le CSS est correct. Mais après avoir cliqué sur le lien qui suppose de charger test.html, l'arrière-plan CSS apparaît toujours mais "cursor: pointer" et "background-image" ne fonctionnent plus.

Que dois-je faire pour que cela fonctionne? Merci d'avance!

Ajouté dans le code 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

Essayez d'ajouter le même fichier css test.html. Si vous utilisez réellement un iframe ou l'incorporation d'une page dans un autre, le CSS ne sera pas répercuté dans la page incorporée. Il est rendu comme son propre document. Mise à jour: Il semble que vous ayez besoin d'ajouter une classe à la première cellule de la ligne pour la rendre stylée. Le test.html ne contient aucun élément qui soit stylisé par la deuxième section de CSS car il ne correspond à aucun élément.

<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>