jQueryスクリプトがドロップダウンメニューのオプションとして年を追加する2つの静的選択フィールドと、「weiter」リンクをクリックして追加できる最初の2つと同様の動的フィールドがあります。
年値追加のスクリプトは、静的な最初の 2 つのフィールドでうまく機能しますが、動的に生成されたフィールドには適用されません。最初の 2 つと同じクラス「von_bis」でそれらを呼び出しています。
これは、ドキュメントのロード時に存在しないためだと思います....
現在の状況は次のとおりです。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>
script: //年
$(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;
})
});
これらの動的フィールドにどのように適用できますか?