克隆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不工作

回答

相關問題