Bootstrap Datetimepicker 不适用于动态字段

Question

我有当前的代码，它是 bootstrap datetimepicker Bootstrap 3 Datepicker，我当前遇到的问题是，当我单击“添加更多字段”时，带有 datetimerpicker 文本字段的新 div 不起作用，任何想法它可能是什么？

<script type="text/javascript">
    $(document).ready(function() {
        var max_fields      = 5; //maximum input boxes allowed
        var wrapper         = $(".input_fields_wrap"); //Fields wrapper
        var add_button      = $(".add_field_button"); //Add button ID

        var x = 1; //initlal text box count
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div>\
                    <div class="input-group date datepicker_init">\
                        <input class="form-control" type="text" name="mytext[]">\
                        <span class="input-group-addon">\
                            <span class="glyphicon glyphicon-calendar"></span>\
                        </span>\
                    </div>\
                    <div class="input-group date datepicker_end">\
                        <input class="form-control" type="text" name="mytext[]">\
                        <span class="input-group-addon">\
                            <span class="glyphicon glyphicon-calendar"></span>\
                        </span>\
                    </div>\
                    <a href="#" class="remove_field red-color">Remove</a>\
                <div class="voffset10"></div>\
                </div>\
                ');
            }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })

$('.datepicker_init').datetimepicker({
    locale: 'es',
    format: 'YYYY-MM-DD HH:mm'
});

$('.datepicker_end').datetimepicker({
    locale: 'es',
    format: 'YYYY-MM-DD HH:mm',
    useCurrent: false
});

$(".datepicker_init").on("dp.change", function (e) {
    $('.datepicker_end').data("DateTimePicker").minDate(e.date);
});

$(".datepicker_end").on("dp.change", function (e) {
    $('.datepicker_init').data("DateTimePicker").maxDate(e.date);
});
});
</script>

<div class="form-group">
    <div class="input_fields_wrap">
        <button class="add_field_button btn btn-info btn-block voffset10">Add More Fields</button>
        <div>
            <div class='input-group date datepicker_init'>
                <input class="form-control" type="text" name="mytext[]">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
            <div class='input-group date datepicker_end'>
                <input class="form-control" type="text" name="mytext[]">
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
        <div class="voffset10">
    </div>
</div>

更新部分

    $(".datepicker_init").on("dp.change", function (e) {
        $('.datepicker_end').data("DateTimePicker").minDate(e.date);
    });

    $(".datepicker_end").on("dp.change", function (e) {
        $('.datepicker_init').data("DateTimePicker").maxDate(e.date);
    });

Answer 1

在添加新 html 后立即在单击处理程序中调用 datepicker init 脚本，如下所示：

$(add_button).click(function(e){ 
    // on add input button click
    e.preventDefault();

    // max input box allowed
    // Reduce nesting!
    if(x >= max_fields){ 
        return
    }

    //text box increment
    x++; 
    var tmp = $(wrapper).append('<div>\
        <div class="input-group date datepicker_init">\
            <input class="form-control" type="text" name="mytext[]">\
            <span class="input-group-addon">\
                <span class="glyphicon glyphicon-calendar"></span>\
            </span>\
        </div>\
        <div class="input-group date datepicker_end">\
            <input class="form-control" type="text" name="mytext[]">\
            <span class="input-group-addon">\
                <span class="glyphicon glyphicon-calendar"></span>\
            </span>\
        </div>\
        <a href="#" class="remove_field red-color">Remove</a>\
    <div class="voffset10"></div>\
    </div>');

    // Init the new pickers
    $('.datepicker_init', tmp).datetimepicker({
        locale: 'es',
        format: 'YYYY-MM-DD HH:mm'
    });

    $('.datepicker_end', tmp).datetimepicker({
        locale: 'es',
        format: 'YYYY-MM-DD HH:mm',
        useCurrent: false
    });
});