Bootstrap 日期选择器在克隆后不起作用（使用 jQuery-Cloneya）

Question

我有一个问题想问你为什么 Bootstrap 日期选择器在我克隆它之后不能与其他人一起使用。我正在使用 jQuery-Cloneya Plugin 来克隆表格，你可以访问这个网站了解它：https://github.com/yapapaya/jquery-cloneya

下面是我试过的cloneya jQuery插件的代码:

<script type="text/javascript" src="<?php echo base_url() . F_JS; ?>jquery-cloneya.js"></script>
                <script>
                    $('#contain-education').cloneya({
                        limit       : 5,  
                        valueClone      : true,
                        dataClone       : true,
                        deepClone       : true,  
                        clonePosition   : 'after',
                        serializeID     : true, 
                        defaultRender   : false
                    });


                    $('#contain-exp').cloneya();
                    $('#contain-lang').cloneya();
                    $('#contain-language').cloneya();
                </script>

下面是要克隆的代码：

<script type="text/javascript">
    $('.contain-education').each(function() {
        var $wrapper = $('.wrap-education', this);
        $("body").on("click",".add-education", $(this),function(e) {
            $('.append-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
        });
        $('.append-field .remove-edu-field', $wrapper).click(function() {
           if ($('.append-field', $wrapper).length > 1)
                $con = confirm("Are you sure you want to delete this?");
                if($con==true){
                    $(this).parent('.append-field').remove();
                }
        });
    });
</script>

这是一个 HTML 代码：

<div class="row" id="contain-education">
                                    <div class="toclone">

                                         <div class="form-group">
                                            <label class="col-xs-3 control-label" for="school_name[]">School name <span class="error">*</span></label>  
                                              <div class="col-xs-8">
                                              <input id="textinput" name="school_name[]" placeholder="" value="<?php echo set_value("school_name"); ?>" class="form-control input-md" type="text">
                                              <span class="error"><?php echo form_error("school_name"); ?></span> 
                                            </div>
                                         </div>

                                         <div class="form-group">
                                            <label class="col-xs-3 control-label" for="program_name[]">Major <span class="error">*</span></label>  
                                              <div class="col-xs-8">
                                              <input type="text" class="form-control input-md" value="<?php echo set_value("program_name"); ?>" placeholder="" name="program_name[]" />
                                            </div>
                                         </div>

                                         <div class="form-group">
                                            <label class="col-xs-3 control-label" for="education_level[]">Education level <span class="error">*</span></label>  
                                              <div class="col-xs-8">
                                              <select class="form-control input-md" name="education_level[]">
                                                <option value="">-- Education level --</option>
                                                <?php foreach($education_level->result() as $row): ?>
                                                <option value="<?php echo $row->education_level_id; ?>"><?php echo $row->name; ?></option>
                                                <?php endforeach; ?>
                                            </select>
                                            </div>
                                         </div>

                                         <div class="form-group">
                                            <label class="col-xs-3 control-label" for="start_edu_date[]">Start date <span class="error">*</span></label>  
                                              <div class="col-xs-8">
                                            <input type="text" class="form-control date_pick" id="start_edu_date" value="<?php echo set_value("start_edu_date"); ?>" name="start_edu_date[]"  required="required">
                                            <span class="error"><?php echo form_error("start_edu_date"); ?></span>
                                            </div>
                                         </div>

                                         <div class="form-group">
                                            <label class="col-xs-3 control-label" for="end_edu_date[]">End date <span class="error">*</span></label>  
                                              <div class="col-xs-8">
                                            <input type="text" class="form-control date_pick" id="end_edu_date" value="<?php echo set_value("end_edu_date"); ?>" name="end_edu_date[]" required="required">
                                            <span class="error"><?php echo form_error("end_edu_date"); ?></span>
                                            </div>
                                         </div>
                                        <div class="form-group">
                                            <div class="col-xs-11">
                                                <span class="pull-right">
                                                    <a href="#" class="btn btn-sm btn-danger delete"><i class="glyphicon glyphicon-remove"></i></a>
                                                    <a href="#" class="btn btn-sm btn-warning clone"><i class="glyphicon glyphicon-plus"></i></a>
                                                </span>
                                            </div>
                                        </div>
                          </div>
                       </div>

感谢您的帮助。

Answer 1

你没有提到你用的是什么插件。假设您的插件是这样调用的：

$('input.date_pick').datepicker();

然后，它将仅应用于现有输入，而不应用于将来创建的输入。

当通过克隆创建新输入时，您可以调用日期选择器：

$('#contain-education').cloneya({
    // ... options
}).on('clone_after_append', function(event, toclone, newclone) {
    $(newclone).find('input.date_pick').datepicker();
});

Bootstrap 日期选择器在克隆后不起作用（使用 jQuery-Cloneya）

Boostrap date picker not work after clone (using jQuery-Cloneya)

javascript

jquery

jquery-cloneya