使用jQuery调用填充DIV时不应用CSS样式

Question

I am populating a <DIV id='area'> element using a PHP script and I want to repopulate the same DIV element by calling a PHP function in JavaScript if the user wishes to filter the information:

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

It populates the DIV element with the correct information but the CSS styling I'm using to format the information (eg. class="highlight") doesn't get applied for some reason. So what I get reads correctly if I view the underlying HTML but the browser doesn't format it according to the stylesheet.

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

Here's what my table should contain within the DIV section:

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

ADDITIONAL INFO: I also use this jQuery code to highlight the rows in the Table - maybe it doesn't work with HTML loaded after the page appears - if so can it be reinitialised?

$(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');
 });
});

Answer 1

Try changing your css from .Highlight to .highlight. CSS selectors are case-insensitive but the HTML class attributes are not.