加载Ajax的内容不会继承CSS

时间:2010-12-15 01:31:03

标签: jquery css ajax

我正在尝试使用jQuery Ajax加载表单,但是当我这样做时,页面的CSS没有应用于表单,所以它看起来都搞砸了。页面上其余的CSS工作并保持不变,但是从我的Ajax调用添加到DOM的新元素似乎不会继承CSS。

这是我的代码:

的Javascript

$.ajax({
  type: "POST",
  url: "Registration.php",
  data: "action=DRAWFORM",
  dataType: "html",
  success: function(html) {
   $("#content").append(html);
  }
 });

HTML

<div id="registration-container">
<form action="submit.php" method="POST">

<p><label for="teamname">Team Name</label><input type="text" id="teamname" name="teamname"/></p>
<p><label for="contactnumber">Contact #</label><input type="text" id="contactnumber" name="contactnumber"/></p>

<div id="teaminfo-headers">
<span class="ID">ID</span>
<span class="name">Name</span>
<span class="UCINetID">UCINetID</span>
</div>
<div id="teaminfo">
<span><input type="text" id="memberID0" name="memberID0" class="text-ID" /></span>
<span><input type="text" id="memberName0" name="memberName0" class="text-name"/></span>
<span><input type="text" id="memberUCIID0" name="memberUCIID0" class="text-UCIID" /></span>
<br />
<span><input type="text" id="memberID1" name="memberID1" class="text-ID" /></span>
<span><input type="text" id="memberName1" name="memberName1" class="text-name" /></span>
<span><input type="text" id="memberUCIID1" name="memberUCIID1" class="text-UCIID" /></span>
<br />
</div>
<a onClick="addMember();return false;" href="#" >Add Member...</a>

<div id="software">
<fieldset><legend>Which software will you use?</legend>
          <label for="software_checkbox_0" class="labelCheckbox"><input type="checkbox" name="software_checkbox" id="software_checkbox_0" class="inputCheckbox" value="Final Cut" /> Final Cut</label>
          <label for="software_checkbox_1" class="labelCheckbox"><input type="checkbox" name="software_checkbox" id="software_checkbox_1" class="inputCheckbox" value="iMovie" /> iMovie</label>
          <label for="software_checkbox_2" class="labelCheckbox"><input type="checkbox" name="software_checkbox" id="software_checkbox_2" class="inputCheckbox" value="Premiere)" /> Premiere</label>
          <label for="software_checkbox_3" class="labelCheckbox"><input type="checkbox" name="software_checkbox" id="software_checkbox_3" class="inputCheckbox" value="Movie Maker" /> Movie Maker</label>
</fieldset>
</div>
<input type="submit" value="Submit" />
</form>
</div>

CSS

#registration-container {
    width: 620px;
}

div#teaminfo-headers span.ID {
    margin-left: 50px;
    margin-right: 50px;
}

div#teaminfo-headers span.name {
    margin-left: 75px;
    margin-right: 75px;
}

div#teaminfo-headers span.UCINetID {
    margin-left: 75px;
    margin-right: 75px;
}

form p {
    text-align:center;
}

form p label {
    width: 100px;
}

form input.text-ID {
    width: 100px;
}

form input.text-name {
    width: 200px;
}

form input.text-UCIID {
    width: 200px;
}

form {
  margin: 0;
  padding: 0;
  font-size: 100%;
  min-width: 560px;
  max-width: 620px;
  width: 590px;
}

label {
  font-size: 100%;
}

form div fieldset {
  clear: none;
  border-width: 1px;
  border-style: solid;
  border-color: #666666;
  margin: 0 0 0 144px;
  padding: 0 5px 5px 5px;
  width: 250px;
  height: 300px;
}

form div fieldset legend {
  font-weight: bold;
}

form div label {
  display: block;
  float: left;
  width: 130px;
  padding: 3px 5px;
  margin: 0 0 5px 0;
  text-align: right;
}

form div label.labelCheckbox {
  float: none;
  display: block;
  width: 200px;
  zoom: 1;
  padding: 0;
  margin: 0 0 5px 142px;
  text-align: left;
}

form div fieldset label.labelCheckbox {
  margin: 0 0 5px 0;
  width: 170px;
}

form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {
  display: inline;
  height: auto;
  width: auto;
  background-color: transparent;
  border-width: 0;
  padding: 0;
  margin: 0 0 0 140px;
}

form input {
    margin: 2 0 0 5;
    padding: 0px;
  background-color: #ffffff;
}

form div label.labelCheckbox {
  display: block;
  width: 190px;
  zoom: 1;
  padding: 4px 0 0 18px;
  text-indent: -18px;
  line-height: 120%;
}

form div label.labelCheckbox input.inputCheckbox, form div label.labelRadio input.inputRadio, label.labelCheckbox input.inputCheckbox, label.labelRadio input.inputRadio {
  margin: 0;
}

对于可能出现的问题的任何帮助或进一步的见解将不胜感激。如果有任何帮助,我会在Chrome中进行测试。

谢谢。

编辑:添加了CSS

0 个答案:

没有答案