我有两个静态选择字段,其中jQuery脚本在下拉菜单和动态字段中附加多年作为选项,类似于前两个,您可以在点击“weiter”链接时添加。
现在,年份值附加的脚本在前两个静态字段上运行良好,但它不适用于动态生成的字段,即使我用前两个字段'von_bis'调用它们。 / p>
这是因为我认为它们在文档加载时不存在....
目前情况如下:http://jsfiddle.net/dzorz/PnRnR/
HTML:
<span class="label-f">von:</span>
<select class="span2 von_bis" id="von" name="von">
<option value="0">von</option>
</select>
<span class="label-f">bis:</span>
<select class="span2 von_bis" id="bis" name="bis">
<option value="0">bis</option>
</select>
<div id="yearWrapper">
</div>
<a href="" id="btn_weitere" class="btn_weitere">weitere</a>
脚本: //年
$(function(){
for (i = new Date().getFullYear(); i > 1900; i--)
{
$('.von_bis').append($('<option/>').val(i).html(i));
}
});
//dinamic
$(document).ready(function() {
var MaxInputs = 5; //maximum input boxes allowed
var InputsWrapper = $("#yearWrapper"); //Input boxes wrapper ID
var AddButton = $("#btn_weitere"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if(x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).append('\
<div class="form-inline f-i-f-d">\
<div class="form-inline f-i-f-d">\
<select class="span2 von_bis" id="von'+ FieldCount +'"\
name="von'+ FieldCount +'">\
<option value="0">von</option>\
</select>\
<select class="span2 von_bis" id="bis'+ FieldCount +'"\
name="bis'+ FieldCount +'">\
<option value="0">bis</option>\
</select>\
</div>\
<a href="#" class="removeclass">remove</a>\
</div>');
x++; //text box increment
}
return false;
});
$("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
}
return false;
})
});
如何将它应用于这些动态字段?
答案 0 :(得分:2)
快速执行此操作的方法是将$(function...)
中当前正在调用的代码移动到$(document).ready()
内的函数中。定义函数后,调用它以便初始选择菜单将应用日期。然后,在if(x <= MaxInputs)
语句中,在致电x++;
之前,再次调用该函数。您可以在此处看到此修复程序:http://jsfiddle.net/PnRnR/1/
问题是,您只需在加载时调用该函数一次,每次添加新复选框时都需要调用它。