【问题标题】:CSS style not applied when DIV populated using jQuery call使用 jQuery 调用填充 DIV 时未应用 CSS 样式
【发布时间】:2016-07-24 03:54:54
【问题描述】:

我正在使用 PHP 脚本填充 <DIV id='area'> 元素,如果用户希望过滤信息,我想通过在 JavaScript 中调用 PHP 函数来重新填充相同的 DIV 元素:

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

它使用正确的信息填充 DIV 元素,但我用来格式化信息的 CSS 样式(例如class="highlight")由于某种原因没有得到应用。因此,如果我查看底层 HTML 但浏览器没有根据样式表对其进行格式化,我得到的 reads 正确。

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

这是我的表格在 DIV 部分中应包含的内容:

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

附加信息: 我还使用此 jQuery 代码突出显示表中的行 - 也许它不适用于页面出现后加载的 HTML - 如果是这样,它可以重新初始化吗?

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

【问题讨论】:

  • 您能否向我们展示您的样式表或至少您想要应用的样式? CSS 可以很好地影响动态内容,因此很可能是您的 CSS 中存在错误。
  • 如果没有确切地看到生成的代码,很难告诉你这是什么。可能如下: 1. 它以编码 html 的形式返回数据,例如,class=&amp;quot;highlight&amp;quot; 2. 文档中未引用您的样式表。
  • 这很不寻常。确保使用所有必要的类和结构正确形成新内容。使用 Firebug 或 Chrome F12 等浏览器开发工具检查替换前后的内容。您可能错过了一个差异(例如缺少外部分类 div)。

标签: php jquery css


【解决方案1】:

尝试将您的 css 从 .Highlight 更改为 .highlight。 CSS 选择器不区分大小写,但 HTML 类属性不区分大小写。

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-03-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多