jQuery生成的选择选项不适用于动态字段答案

【问题标题】：jQuery generated select option not working on dynamic fieldsjQuery生成的选择选项不适用于动态字段
【发布时间】：2013-06-18 22:52:56
【问题描述】：

我有两个静态选择字段，jQuery 脚本在其上附加年份作为下拉菜单中的选项，动态字段类似于前两个，您可以在单击“weiter”链接时添加它们。

现在年份值追加脚本在前两个静态字段上效果很好，但它不适用于动态生成的字段，即使我用与前两个相同的类“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>

脚本： //年

$(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;
                })

        });

如何将其应用于这些动态字段？

【问题讨论】：

大部分问题都在jQuery.on() 的文档中得到了解答。查看“委托”活动。
另外，由于AddButton 已经是一个jQuery 集合，$(AddButton) 没有任何意义。为了不混淆这些东西，我有时将这些变量命名为 var $addButton = $(...); ... $addButton.on(...);
这不是问题。问题是添加日期的函数在加载时被调用，但没有被再次调用。

标签： jquery select dynamic field

【解决方案1】：

一个快速的方法是将当前在$(function...) 中调用的代码移动到$(document).ready() 中的一个函数中。定义函数后，调用它，以便初始选择菜单应用日期。然后，在if(x <= MaxInputs) 语句中，在调用x++; 之前，再次调用该函数。您可以在此处查看修复：http://jsfiddle.net/PnRnR/1/

问题是您在加载时只调用了一次函数，而每次添加新复选框时都需要调用它。

【讨论】：