将pickadate jquery插件应用于动态输入字段

Apply pickadate jquery plugin to a dynamic input field

本文关键字：动态 输入 字段 应用于 插件 pickadate jquery      更新时间：2023-09-26

我正在动态创建一个输入字段，并试图应用pickadate jquery插件，但它不工作。

我有一个按钮，当用户单击它时触发一个事件，然后在下面生成一个新字段，等等。

我有下面的代码来动态创建输入字段。

var x = InputsWrapper.length; //initlal text box count
$(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><input type="text"><a href="#" class="removeclass">&times;</a><div id="align_new"><ul><li><span>Start : </span><input type="text" class="datepicker" id="list'+FieldCount+'_start_date"></li><li><span>End : </span><input type="text" class="datepicker" id="list'+FieldCount+'_end_date"></li></ul></div></div>');
            x++;
        }
return false;
});

每个字段都有一个不同的id:从list2_start_date和list2_end_date开始，用户每次添加一个字段，编号就会增加。

在我的静态输入字段上，插件工作得很好，但它不能将插件应用于动态创建的字段。

我必须处理事件的函数是:

$(document).ready(function() {
    $( '#list1_start_date' ).pickadate()
    $( '#list1_end_date' ).pickadate()
    $( '#list2_start_date' ).pickadate()
    $( '#list2_end_date' ).pickadate()
    $( '#list3_start_date' ).pickadate()
    $( '#list3_end_date' ).pickadate()
    $( '#list4_start_date' ).pickadate()
    $( '#list4_end_date' ).pickadate()
    $( '#list5_start_date' ).pickadate()
    $( '#list5_end_date' ).pickadate()
});

和HTML:

<div id="InputsWrapper">
        <span class="new_span">Field :</span>
        <input type="text">
        <span class="new_span" style="width:186px;"></span>
        <div id="align_new">
            <ul>
                <li>
                    <span>Start :</span>
                    <input style="width:88px;" type="text" class="datepicker" id="list1_start_date">
                </li>
                <li>
                    <span>End :</span>
                    <input style="width:88px;" type="text" class="datepicker" id="list1_end_date">
                </li>
            </ul>
        </div>
    </div>

解决方案:

只需在追加部分后面添加.find():

$(InputsWrapper).append('<code_here>').find('.datepicker').pickadate();

代码得到:

$(InputsWrapper).append('<div><input type="text"><a href="#" class="removeclass">&times;</a><div id="align_new"><ul><li><span>Start : </span><input type="text" class="datepicker" id="list'+FieldCount+'_start_date"></li><li><span>End : </span><input type="text" class="datepicker" id="list'+FieldCount+'_end_date"></li></ul></div></div>').find('.datepicker').pickadate();
相关文章：