2016-04-04 10 views
1

Ich bevölkern ein <DIV id='area'> Element ein PHP-Skript, und ich möchte das gleiche DIV-Element neu zu besiedeln durch eine PHP-Funktion in JavaScript aufrufen, wenn der Benutzer die Informationen filtern möchte:CSS Stil nicht angewendet, wenn DIV bevölkert mit jQuery Aufruf

$("#area").load("update-dashboard.php?id=7263"); 

Es füllt das DIV-Element mit den richtigen Informationen, aber das CSS-Styling, das ich verwende, um die Informationen zu formatieren (z. B. class="highlight") wird aus irgendeinem Grund nicht angewendet. Also, was ich bekomme liest korrekt, wenn ich den zugrunde liegenden HTML anzeigen, aber der Browser formatiert es nicht entsprechend dem Stylesheet.

<style type="text/css"> 
.Highlight { 
background-color: #dcfac9; 
cursor: pointer; 
} 
td.highcell { 
padding-top: 8px; 
padding-bottom: 8px; 
} 
</style> 

Hier ist, was meine Tabelle innerhalb des DIV Abschnitt enthalten:

<table style='border-collapse: collapse;' border=0 width='100%' id='link-table'> 
<tr class='highlight'> 
<td class='highcell'> 
<a href="javascript:ShowWait('754', 'Car Survey', '16', 'NK51+SNR55', '', '');">NK51 SNR55</a> 
</td> 
<td class='highcell' width=36> 
<img src='status_2.png' border=0 width=32 height=32><td class='highcell'>18-Dec-15</td> 
<td class='highcell'>NK51 SNR55</td> 
<td class='highcell'></td> 
<td class='highcell'></td> 
</tr> 

ZUSÄTZLICHE INFORMATIONEN: ich auch dieses jQuery-Code verwenden, um die Zeilen in der Tabelle zu markieren - vielleicht tut es nicht Arbeitet mit HTML, nachdem die Seite erscheint - wenn ja, kann sie neu initialisiert werden?

$(function() 
{ 
$('#link-table td:first-child').hide(); 
$('#link-table tr').hover(function() 
{ 
    $(this).toggleClass('highlight'); 
}); 
$('#link-table tr').click(function() 
{ 
    location.href = $(this).find('td a').attr('href'); 
}); 
}); 
+0

Können Sie uns Ihr Stylesheet zeigen oder zumindest die Stile, die Sie verwenden möchten? CSS wirkt sich auf dynamischen Inhalt gut aus, daher ist es höchstwahrscheinlich etwas in Ihrem CSS falsch. –

+0

Ohne den generierten Code genau zu sehen, ist es schwer zu sagen, was das ist. Es könnte das folgende sein: 1. Es gibt die Daten als codiertes html zurück, zum Beispiel 'class = " highlight "' 2. Ihr Stylesheet wird nicht in dem Dokument verwiesen. – carlcheel

+0

Das ist ungewöhnlich. Stellen Sie sicher, dass der neue Inhalt korrekt mit allen erforderlichen Klassen und Strukturen erstellt wurde. Verwenden Sie Browser-Tools wie Firebug oder Chrome F12, um den Inhalt vor und nach dem Austausch zu überprüfen. Es gibt wahrscheinlich einen Unterschied, den Sie verpasst haben (wie ein fehlendes äußeres klassifiziertes div). –

Antwort

1

Versuchen Sie, Ihre CSS .Highlight-.highlight ändern. Bei CSS-Selektoren wird die Groß-/Kleinschreibung nicht berücksichtigt, die HTML-Klassenattribute jedoch nicht.

+3

Das stimmt nicht wirklich. [CSS ist case - ** insensitive **] (https://www.w3.org/TR/CSS2/syndata.html#characters); html * ist * Groß-und Kleinschreibung. – justinw

+0

Du hast Recht .. Ich war gerade mitten in der Aktualisierung! –

+0

Ich habe versucht, eine Probe Geige basierend auf den Kommentaren https://jsfiddle.net/hfkw8q47/ –

Verwandte Themen