Bootstrap 使用 javascript 追加动态元素时日期选择器不工作

Question

我在附加到 div 的表单元素上使用 bootstrap 日期选择器。附加到 div 后，它不起作用。

$('#bp').on('click', function(){
    $('.wraper').empty();
           var data ='<form role="form" method="get" action="" class="has-validation-callback">'+
           '<h5 class="center" style="padding-right: 189px;">Serach Booking & Placement Report</h5><br>'+
           '<input type="hidden" name="type" id="type" class="col-xs-12 " value="bp" data-validation="required" placeholder="Range From" />'+



              '<div class="col-sm-4">\n'+
               '<label class="col-sm-4 control-label no-padding-right" for="unit">From </label>'+
               '<input type="text" name="range_from" id="range_from" class="datepicker col-xs-12 " value="" data-validation="required" placeholder="Range From" />'+
           '</div>'+
           '<div class="col-sm-4">'+
               '<label class="col-sm-4 control-label no-padding-right" for="unit">To </label>'+
               '<input type="text" name="range_to" id="range_to" class="datepicker col-xs-12 " value="" data-validation="required" placeholder="Range to" />'+
           '</div>'+

           '<div class="col-sm-2">'+
           '<label class="col-sm-2 control-label no-padding-right" for="unit">  </label>'+
               '<br><button type="submit" class="btn btn-primary btn-sm">'+
                                        '<i class="fa fa-search"></i>'+
                                        'Search'+
                                    '</button>'+
           '</div>'+
           '</form>';
           $('.order-wraper').append(data);
           $('.datepicker').datepicker();
        });

Answer 1

像这样初始化你的选择器

$('body').on('focus',".datepicker ", function(){
    $(this).datepicker();
});

请参阅 http://api.jquery.com/on/，尤其是有关 "delegated events"

的部分

Bootstrap 使用 javascript 追加动态元素时日期选择器不工作

Bootstrap Datepicker not working while append using javascript for Dynamic Elements

javascript

frontend

bootstrap-datepicker