引导日期时间选取器不适用于动态字段

附加新 html 后立即在单击处理程序中调用日期选择器 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
    });
});

首先，当 $（document）.ready 不在动态div 创建时间中时，您的日期时间选择器绑定发生在div 上，因为add_button单击事件创建您的动态div，这次不是绑定日期时间选择器。 因此，在创建动态div 后，您必须同时绑定此div 的日期时间选择器。 以下更改可以帮助您了解-

将下面的代码放在任何函数上，并在两个时间（即在document.ready时间和div创建时间）调用此函数

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

所以最后你的脚本看起来像这样

$(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>'
                ');
            }
            yourfunction();
        });
        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
        yourfunction();
        $(".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);
        });
    });