Question

我正在动态创建一个输入字段并尝试将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>

Answer 1

解决方案：

只需在追加后添加.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();

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

1 个答案: