年齡不在該字段中輸出

Question

我克隆了一個包含日期選擇器的div。我有固定的日期選擇器使用克隆時：

// Re-initialize the datepicker 
$(".datepicker").each(function() { 
    // Remove the class 
    $(this).removeAttr('id').removeClass('hasDatepicker'); 
    // Re-initialize the datepicker 
    $(this).datepicker({ 
     dateFormat: 'yy-mm-dd', 
     changeMonth: true, 
     changeYear: true, 
     yearRange: "-150:+0" 
    }); 
}); 

上日期選擇器的每次改變，它計算的年齡和輸出值的年齡場。但是，重複不能將該字段的值改變爲計算的年齡。我無法捕捉日期選擇器ID，因爲每次它被克隆時，ID的值都是隨機的，所以我使用了一個類。

for (var counts = 1; counts <= 20; counts++) { 
    (function(counts) { 
     $(".datepicker").each(function() { 
     $(".co_birthdate" + counts).on("change", function() { 

      var today = new Date(); 
      var birthDate = new Date($(this).val()); 
      var age = today.getFullYear() - birthDate.getFullYear(); 
      var m = today.getMonth() - birthDate.getMonth(); 
      if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) { 
       age--; 
      } 

      if (age <= 0) { 
       alert("Age value is invalid."); 
      } else { 
       // Display age 
       $("#co_age" + counts).val(age); 
      } 
     }); 
     }); 
    })(counts); 
} 

下面是HTML：

<div class="col-sm-4"> 
    <div class="form-group custom-addon-holder"> 
     <label for="bdate">Birthdate:</label> 
     <input type="text" class="form-control datepicker co_birthdate" id='co_birthdate' placeholder="YYYY/MM/DD" name="co-buyer1[co_birthdate]" title="Birthdate" /> 
     <span class="input-group-addon custom-addon"><i class="fa fa-calendar"></i> 
     </span> 
    </div> 
</div> 
<div class="col-sm-4"> 
    <div class="form-group"> 
     <label for="bdate">Age:</label> 
     <input type="text" class="form-control required co_age" name="co-buyer1[co_age]" id='co_age' title="Age" readonly /> 
    </div> 
</div> 

Answer 1

你定義ID $（ 「＃co_age」 +計數）以HTML格式？ 我想你只定義（「#co_age」），但在添加ID字符串計數未發現

Answer 2

我會溝id s的動態生成的元素，並使用與jQuery的eq()一個class。另外，我會在添加日期選擇器之前存儲元素的克隆，以避免必須刪除並重新添加它們。

$(function() { 
 
    // make a clone of the elements before adding the datepicker and store html 
 
    // this way you dont have to deal with removing and re-adding the datepicker later 
 
    var stemcell = $('.myRow:eq(0)').clone().wrap('<div>').parent().html(); 
 

 
    $('#clone').click(function(){ 
 
     // retrieve the clone 
 
     var clone = $(stemcell); 
 
     clone.find('.datepicker').datepicker({ 
 
      dateFormat: 'yy-mm-dd', 
 
      changeMonth: true, 
 
      changeYear: true, 
 
      yearRange: '-150:+0' 
 
     }); 
 
     $('.myContainer').append(clone); 
 
    }); 
 

 
    // initialize the datepickers present on load 
 
    $('.datepicker').datepicker({ 
 
     dateFormat: 'yy-mm-dd', 
 
     changeMonth: true, 
 
     changeYear: true, 
 
     yearRange: '-150:+0' 
 
    }); 
 
    // bind change event 
 
    $('.myContainer').on('change', '.datepicker', function() { 
 
     var birthdate = moment($(this).val()); 
 
     var age = Math.floor(moment().diff(birthdate, 'years', true)); 
 
     if (age < 1) { 
 
      alert("Age value is invalid."); 
 
     } else { 
 
      // get index of chaneged co_birthdate field 
 
      var cur = $('.co_birthdate').index($(this)); 
 
      // set age to the co_age element at the same index 
 
      $('.co_age').eq(cur).val(age); 
 
     } 
 
    }); 
 
}); 
 

 

.myRow{ 
 
    margin-bottom:20px; 
 
    
 
}

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script> 
 
<input type="button" id="clone" value="Clone Elements"/> 
 
<br> 
 
    <br> 
 
<div class="myContainer"> 
 
    <div class="myRow"> 
 
     <div class="col-sm-4"> 
 
      <div class="form-group custom-addon-holder"> 
 
       <label for="bdate">Birthdate:</label> 
 
       <input type="text" class="form-control datepicker co_birthdate" class='co_birthdate' placeholder="YYYY/MM/DD" name="co-buyer1[co_birthdate]" title="Birthdate" /> <span class="input-group-addon custom-addon"><i class="fa fa-calendar"></i> 
 
     </span> 
 

 
      </div> 
 
     </div> 
 
     <div class="col-sm-4"> 
 
      <div class="form-group"> 
 
       <label for="bdate">Age:</label> 
 
       <input type="text" class="form-control required co_age" name="co-buyer1[co_age]" class='co_age' title="Age" readonly /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>