使用AJAX插入后,HTML-Content不应用CSS

时间:2013-05-14 10:21:50

标签: php javascript html css ajax

我使用AJAX从数据库中获取特定页面的页面内容。 这很完美,但现在我的问题是:

对于'联系人' -Page,我从数据库中获取表单(只是HTML ...)。但它忽略了CSS,我已经加载到页面的头部。 表单部分有ID和类。

我的想法是,它是由插入内容后加载CSS引起的。

注意:我没有使用JQuery,我也不想在这个项目中使用它。

表单如下所示:

<form method="post" action="#">
<label id="CLabel" for="sendname">Name:<span class="required"></span></label><input type="text" class="contact" name="sendname" maxlength="30" required placeholder="Your Name..(Required)"><br>
<label id="CLabel" for="sendemail">Email:<span class="required"></span></label><input type="email" class="contact" name="sendemail" maxlength="100" placeholder="Your Email-address.."><br>
<label id="CLabel" for="reason">Contact reason:</label><input type="text" class="contact" name="sendreason" maxlength="30" required placeholder="Your Reason..(Required)"><br>
<label id="CLabel" for="sendmsg"></label><textarea id="cmsg" class="noResize" name="sendmsg" required placeholder="Your Message..(Required)" onfocus="this.value=\"\"; this.onfocus=null;"></textarea><br>
<label id="CLabel" for="contactbutton"></label><input class="contactbutton" type="submit" name="contactbutton" value="Send">
</form>

要查看CSS或Javascript,请查看链接: philliprohde.bugs3.com/new_/

css如下(将ID更改为类):

label.CLabel{
display:inline-block;
width: 7em;
}
input.contact{
width:400px;
margin-top:5px;
}
/* Button of the contact form */
.contactbutton{
width: 100px;
background: #c1c1c1;
color: #8b0000;
text-transform: uppercase;
text-shadow: #000 1px 1px;
margin-top: 10px;
}
textarea.noResize { resize:none; }
textarea#cmsg {
width: 400px;
height: 120px;
margin-top:5px;
border:none;
font-family: Tahoma, sans-serif;
}

解决。主持人还没有接受我的新css文件(我不知道为什么)。 我删除了旧的,再次上传它,现在它可以工作。

感谢您的支持。!

1 个答案:

答案 0 :(得分:2)

两件事:

  • 您的预览链接无效;
  • 您发布的标记无效(您正在为标签重复使用ID“CLabel”)。

这些都不会影响您的CSS,尽管多ID可能会在开发的其他地方为您带来一些问题。

在加载后,通过页面中的任何CSS(相关的)设置样式,将内容添加到页面中。

以下是我建议您调试的内容:

  • 是否可能没有按预期实际包含CSS?打开Firebug或Chrome开发者工具,确保在CSS通过时没有收到任何错误。
  • 您的CSS可能无法正确定位新内容吗?
  • 从您的问题(目前)来看并不明显,但您是否有可能通过iFrame加载内容(在这种情况下,父页面的CSS不会影响它)。< / LI>