克隆Datepicker不工作

我复制了以下字段。而我的问题是克隆的datepicker无法正常工作。克隆Datepicker不工作

<div class="col-md-12"> 
    <button type="button" id="childField" class="btn btn-primary btn-addon m-b-sm btn-rounded"><i class="fa fa-plus"></i> ADD FIELDS</button> 
</div> 
<div id="Children"> 
    <div class="divider col-md-12"></div> 
    <div class="form-group col-md-7"> 
    <label for="child">Name of Child</label> 
    <input type="text" class="form-control" name="child[]" id="child" placeholder="FULL NAME"> 
    </div> 

    <div class="form-group col-md-5"> 
    <label for="ch_DateOfBirth">Date of Birth</label> 
    <input type="text" class="form-control date-picker" name="ch_DateOfBirth" id="DateOfBirth" placeholder="Date of Birth"> 
    </div> 
</div>

这是我的jQuery复制字段。

$(document).ready(function() { 
 
    $('#childField').click(function() { 
 
     $('#Children').clone().insertAfter("#Children"); 
 
    }); 
 
});

来源

2017-02-05 Laurie

定义 “不工作”。 –

我的意思是，datepicker没有显示出来，当输入字段被点击时，无论如何，我已经找到了答案。谢谢。 – Laurie

未来，“它不工作”的问题应该包括三件事：（a）你期望它做什么，（b）你为什么认为它应该这样做，以及（c）它实际上在做什么。 –

当克隆一些HTML是松是事件绑定，所以你必须重新初始化的事件在这种情况下，日期选择器使用它自己的事件绑定。

而且你也不能使用多个相同的ID，所以你必须改变ID。

var idInc = 1; 
 
$(document).ready(function() { 
 

 
    $('#childField').click(function() { 
 
    var cloned = $('#Children').clone(); 
 
    cloned.find('input').each(function() { 
 
     var id = $(this).attr('id'); 
 
     $(this).attr('id', id + '-' + idInc); 
 
    }) 
 
    idInc++; 
 
    cloned.insertAfter("#Children"); 
 
    $('.date-picker').datePicker() // Whatever // You have to reinitialise 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
    <button type="button" id="childField" class="btn btn-primary btn-addon m-b-sm btn-rounded"><i class="fa fa-plus"></i> ADD FIELDS</button> 
 
</div> 
 
<div id="Children"> 
 
    <div class="divider col-md-12"></div> 
 
    <div class="form-group col-md-7"> 
 
    <label for="child">Name of Child</label> 
 
    <input type="text" class="form-control" name="child[]" id="child" placeholder="FULL NAME"> 
 
    </div> 
 

 
    <div class="form-group col-md-5"> 
 
    <label for="ch_DateOfBirth">Date of Birth</label> 
 
    <input type="text" class="form-control date-picker" name="ch_DateOfBirth" id="DateOfBirth" placeholder="Date of Birth"> 
 
    </div> 
 
</div>

来源

2017-02-08 08:37:45

克隆Datepicker不工作

回答

相关问题