我正在使用jQuery在表单中添加一个新的表单条目,并且需要添加一些类来验证字段的输入。当我在Firefox或Chrome中保存并加载页面时,不会添加验证类(“validate-select”,“required-entry”,“validate-zip”等)。其他类正在添加。我为它设置了一个小提琴,它也没有在那里工作,所以它不是一个javascript冲突。我也通过JSHint运行它没有错误:
function addSection(position){
var newli = document.createElement('li');
newli.setAttribute("class", "field content "+position);
var country = jQuery("<input></input>").attr("type", "hidden").attr("id", "dest_country_id"+position).attr("name", "dest_country_id"+position).addClass("dest_country_id").attr("value", "US");
var statecontents = "<option value=''>Select a state</option>"+"";
var state = jQuery("<div></div>").addClass("picker state").append(jQuery("<select></select>").attr("id", "dest_region_id"+position).addClass("validate-select input select dest_region_id").append(statecontents));
var zip = jQuery("<div></div>").addClass("zip").append(jQuery("<input></input>").attr("type", "text").attr("id", "dest_zip"+position).attr("name", "dest_zip"+position).addClass("dest_zip required-entry input text xnarrow").attr("placeholder", "starting zip")).append(jQuery("<span></span>").text(" to ")).append(jQuery("<input></input>").attr("type", "text").attr("id", "dest_zip_to"+position).attr("name", "dest_zip_to"+position).addClass("dest_zip_to required-entry input text xnarrow").attr("placeholder", "ending zip"));
var weight = jQuery("<div></div>").addClass("weight").append(jQuery("<input></input>").attr("type", "text").attr("id", "weight_from"+position).attr("name", "weight_from"+position).addClass("required-entry weight_from input text xnarrow").attr("placeholder", "starting weight")).append(jQuery("<span></span>").text(" - ")).append(jQuery("<input></input>").attr("type", "text").attr("id", "weight_to"+position).attr("name", "weight_to"+position).addClass("weight_to required-entry input text xnarrow").attr("placeholder", "ending weight"));
var price = jQuery("<div></div>").addClass("price").append(jQuery("<input></input>").attr("type", "text").attr("id", "price"+position).attr("name", "price"+position).addClass("price required-entry input text xnarrow").attr("placeholder", "price"));
var remove = jQuery("<div></div>").addClass("delete").append(jQuery("<a></a>").attr("href", "#").attr("onclick", "removeRule("+position+"); return false;").append(jQuery("<i></i>").addClass("icon-trash mp_delete")));
var stateHead = jQuery("<div></div>").attr("class","state-wrap").append(jQuery("<span></span>").attr("class","form-head").text(" State ")).append(jQuery("<div></div>").addClass("picker state").append(jQuery("<select></select>").attr("id", "dest_region_id"+position).attr("name", "dest_region_id"+position).addClass("input select dest_region_id").append(statecontents)));
var zipHead = jQuery("<div></div>").attr("class","zip-wrap").append(jQuery("<span></span>").attr("class","form-head").text(" ZIP Code Range ")).append(jQuery("<div></div>").addClass("zip").append(jQuery("<input></input>").attr("type", "text").attr("id", "dest_zip"+position).attr("name", "dest_zip"+position).addClass("dest_zip input text xnarrow").attr("placeholder", "Starting ZIP")).append(jQuery("<span></span>").text(" to ")).append(jQuery("<input></input>").attr("type", "text").attr("id", "dest_zip_to"+position).attr("name", "dest_zip_to"+position).addClass("dest_zip_to input text xnarrow").attr("placeholder", "Ending ZIP")));
var weightHead = jQuery("<div></div>").attr("class","weight-wrap").append(jQuery("<span></span>").attr("class","form-head").text(" Weight ")).append(jQuery("<div></div>").addClass("weight").append(jQuery("<input></input>").attr("type", "text").attr("id", "weight_from"+position).attr("name", "weight_from"+position).addClass("weight_from input text xnarrow").attr("placeholder", "Starting Weight")).append(jQuery("<span></span>").text(" to ")).append(jQuery("<input></input>").attr("type", "text").attr("id", "weight_to"+position).attr("name", "weight_to"+position).addClass("weight_to input text xnarrow").attr("placeholder", "Ending Weight")));
var priceHead = jQuery("<div></div>").attr("class","price-wrap").append(jQuery("<span></span>").attr("class","form-head").text(" Price ")).append(jQuery("<div></div>").addClass("price").append(jQuery("<input></input>").attr("type", "text").attr("id", "price"+position).attr("name", "price"+position).addClass("price input text xnarrow").attr("placeholder", "Price")));
var removeHead = jQuery("<div></div>").attr("class","remove-wrap").append(jQuery("<div></div>").addClass("delete btn metro").append(jQuery("<a></a>").attr("href", "#").attr("onclick", "removeRule("+position+"); return false;").text("Cancel").append(jQuery("<i></i>").addClass("icon-trash mp_delete"))));
var addHead = jQuery("<div></div>").attr("class","add-wrap").append(jQuery("<div></div>").addClass("medium metro btn default").append(jQuery("<a></a>").addClass("add_btn").attr("href","#").text("Add a rate").append(jQuery("<i></i>").addClass("icon-plus-squared"))));
var title = jQuery("<div></div>").attr("class","rate-title").append(jQuery("<span></span>").text("Add a New Rate:"));
var ni = document.getElementById('add-rates');
jQuery(newli).append(title,country,stateHead,zipHead,weightHead,priceHead,removeHead,addHead);
ni.appendChild(newli);
position++;
return position;
}
<li class="field content 0"><div class="rate-title"><span>Add a New Rate:</span></div><input type="hidden" id="dest_country_id0" name="dest_country_id0" class="dest_country_id" value="US"><div class="state-wrap"><span class="form-head"> State </span><div class="picker state"><select id="dest_region_id0" name="dest_region_id0" class="input select dest_region_id"><option value="">Select a state</option><option value="1">Alabama</option><option value="2">Alaska</option><option value="3">American Samoa</option><option value="4">Arizona</option><option value="5">Arkansas</option><option value="6">Armed Forces Africa</option><option value="7">Armed Forces Americas</option><option value="8">Armed Forces Canada</option><option value="9">Armed Forces Europe</option><option value="10">Armed Forces Middle East</option><option value="11">Armed Forces Pacific</option><option value="12">California</option><option value="13">Colorado</option><option value="14">Connecticut</option><option value="15">Delaware</option><option value="16">District of Columbia</option><option value="17">Federated States Of Micronesia</option><option value="18">Florida</option><option value="19">Georgia</option><option value="20">Guam</option><option value="21">Hawaii</option><option value="22">Idaho</option><option value="23">Illinois</option><option value="24">Indiana</option><option value="25">Iowa</option><option value="26">Kansas</option><option value="27">Kentucky</option><option value="28">Louisiana</option><option value="29">Maine</option><option value="30">Marshall Islands</option><option value="31">Maryland</option><option value="32">Massachusetts</option><option value="33">Michigan</option><option value="34">Minnesota</option><option value="35">Mississippi</option><option value="36">Missouri</option><option value="37">Montana</option><option value="38">Nebraska</option><option value="39">Nevada</option><option value="40">New Hampshire</option><option value="41">New Jersey</option><option value="42">New Mexico</option><option value="43">New York</option><option value="44">North Carolina</option><option value="45">North Dakota</option><option value="46">Northern Mariana Islands</option><option value="47">Ohio</option><option value="48">Oklahoma</option><option value="49">Oregon</option><option value="50">Palau</option><option value="51">Pennsylvania</option><option value="52">Puerto Rico</option><option value="53">Rhode Island</option><option value="54">South Carolina</option><option value="55">South Dakota</option><option value="56">Tennessee</option><option value="57">Texas</option><option value="58">Utah</option><option value="59">Vermont</option><option value="60">Virgin Islands</option><option value="61">Virginia</option><option value="62">Washington</option><option value="63">West Virginia</option><option value="64">Wisconsin</option><option value="65">Wyoming</option></select></div></div><div class="zip-wrap"><span class="form-head"> ZIP Code Range </span><div class="zip"><input type="text" id="dest_zip0" name="dest_zip0" class="dest_zip input text xnarrow" placeholder="Starting ZIP"><span> to </span><input type="text" id="dest_zip_to0" name="dest_zip_to0" class="dest_zip_to input text xnarrow" placeholder="Ending ZIP"></div></div><div class="weight-wrap"><span class="form-head"> Weight </span><div class="weight"><input type="text" id="weight_from0" name="weight_from0" class="weight_from input text xnarrow" placeholder="Starting Weight"><span> to </span><input type="text" id="weight_to0" name="weight_to0" class="weight_to input text xnarrow" placeholder="Ending Weight"></div></div><div class="price-wrap"><span class="form-head"> Price </span><div class="price"><input type="text" id="price0" name="price0" class="price input text xnarrow" placeholder="Price"></div></div><div class="remove-wrap"><div class="delete btn metro"><a href="#" onclick="removeRule(0); return false;">Cancel<i class="icon-trash mp_delete"></i></a></div></div><div class="add-wrap"><div class="medium metro btn default"><a class="add_btn" href="#">Add a rate<i class="icon-plus-squared"></i></a></div></div></li>
类似的代码在我的网站上的其他位置工作,当我检查Firefox和Chrome中的元素时,这些类会显示出来。我是否将类添加到错误的元素中?