jquery ui datepicker不适用于附加的div

Question

嗨，我想在附加的 div 上显示 datepicker，但它只影响第一次加载 div。 当我尝试在附加的 div 日期选择器上附加 div 时不起作用。

这是我的代码。

$("body").on("focus", ".datepickers", function() {
    var $context = $(this).parents('.entry_day_plan');
    $($(this), $context).datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: "dd/mm/yy",
        minDate: 0,
        onSelect: function(selectedDate) {
            //$("#cal4").datepicker("setDate", selectedDate);
        }
    });
});
$(function() {
    $("body").on('click', '.btn-add', function(e) {
        e.preventDefault();
        var controlForm = $('.controls_day_plan:first'),
            currentEntry = $(this).parents('.entry_day_plan:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);
        newEntry.find('input').val('hello');
        controlForm.find('.entry_day_plan:not(:last) .btn-add').removeClass('btn-add').addClass('btn-remove').removeClass('btn-success').addClass('btn-danger').html('<span class="glyphicon glyphicon-minus"></span>');
        newEntry.find(".datepickers").removeClass('hasDatepicker');
    }).on('click', '.btn-remove', function(e) {
        $(this).parents('.entry_day_plan:first').remove();
        e.preventDefault();
        return false;
    });
});

这是一个html代码...

<div class="panel-body dayplan">
    <!--Day Plan-->

    <div class="control-group" id="fields">
        <label class="control-label" for="field1">Please add Day Plan </label>
        <div class="controls_day_plan">
            <div class="entry_day_plan input-group col-sm-12 col-xs-12 ">
                <div class="form-group col-sm-2 col-xs-12">
                    <label for="exampleInputnumber"> Excursion Name </label>
                    <input type="text" name="itnryname[]" class=" form-control form_line_only" placeholder="EXCURSIONS NAME">
                </div>
                <div class="form-group col-sm-2 col-xs-12">
                    <label for="exampleInputnumber"> Insert Dates </label>
                    <input type="text" name="itndate[]" class="datepickers form-control form_line_only dateit" placeholder="DD/MM/YYYY">
                </div>
                <div class="form-group col-sm-2 col-xs-12">
                    <label for="exampleInputnumber"> Insert Day </label>
                    <select name="itnday[]" class="form_line_only form-control ">
                        <option>Monday</option>
                        <option>Tuesday</option>
                        <option>Wednesday</option>
                        <option>Thursday</option>
                        <option>Friday</option>
                        <option>Saturday</option>
                        <option>Sunday</option>
                    </select>
                </div>
                <div class="form-group col-sm-2 col-xs-12">
                    <label for="exampleInputnumber"> Pickup From </label>
                    <input type="text" name="itnpickfrom[]" class=" form-control form_line_only" placeholder="HOTEL">
                </div>
                <div class="form-group col-sm-2 col-xs-12">
                    <label for="exampleInputnumber"> Pickup Time </label>
                    <input type="text" name="itnpick[]" class="time timepiker form-control form_line_only" placeholder="6:30 AM">
                </div>
                <div class="form-group col-sm-1 col-xs-12">
                    <label for="exampleInputnumber"> Dropoff </label>
                    <input type="text" name="itndrop[]" class="time timepiker form-control form_line_only" placeholder="7:00 PM">
                </div>

                <span class="input-group-btn day_plan pull-left">
                    <button class="btn btn-success  btn-add add_col" type="button"> <span class="glyphicon glyphicon-plus"></span> </button>
                </span>
            </div>

        </div>
    </div>
    <br>
    <small>(Press <span class="glyphicon glyphicon-plus gs"></span> to add another Day Plan)</small> </div>

谁能告诉我如何添加 datepicker 并获取它的值 ion appended div。

它已经在第一次加载 div 上工作，但在附加的 div 输入上没有工作...... 所有附加的输入都有相同的类..我做错了什么？请建议我..

这里是 jsfiidle demo

谢谢

Answer 1

查看此pen

var datePickerOption = {
    showOtherMonths: true,
    selectOtherMonths: true,
    dateFormat: "dd/mm/yy",
    minDate: 0,
    onSelect: function(selectedDate) {}
}

$("body").on("focus", ".datepickers", function() {
    var $context = $(this).parents('.entry_day_plan');
    $($(this), $context).datepicker({
        showOtherMonths: true,
        selectOtherMonths: true,
        dateFormat: "dd/mm/yy",
        minDate: 0,
        onSelect: function(selectedDate) {}
    });
});

var count = 0;
$(function() {
    $("body").on('click', '.btn-add', function(e) {
        e.preventDefault();
        count++;
        var controlForm = $('.controls_day_plan:first'),
            currentEntry = $(this).parents('.entry_day_plan:first'),
            newEntry = $(currentEntry.clone()).appendTo(controlForm);

        newEntry.find('input.datepickers').val('').attr('id', 'input_' + count).datepicker(datePickerOption);
        controlForm.find('.entry_day_plan:not(:last) .btn-add')
            .removeClass('btn-add').addClass('btn-remove')
            .removeClass('btn-success').addClass('btn-danger')
            .html('<span class="glyphicon glyphicon-minus"></span>');
        newEntry.find(".datepickers").removeClass('hasDatepicker');


    }).on('click', '.btn-remove', function(e){
            $(this).parents('.entry_day_plan:first').remove();
            e.preventDefault();
            return false;
    });
});