我正在尝试使用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