javascript - 使用 javascript 附加动态元素时 Bootstrap Datepicker 不起作用

Question

我在附加到 div 的表单元素上使用引导日期选择器。追加到 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/特别是关于“委托(delegate)事件”的部分