年龄不在现场输出

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"
   });
});

该日期选择器的每次更改都会计算年龄并将值输出到年龄字段。但是，重复无法将字段的值更改为计算的年龄。我无法捕获 datepickers 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

我会抛弃带有动态生成元素的ids，并使用带有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>

Answer 2

您在其中以 HTML 格式定义 ID $("#co_age" + counts)。?? 我认为您只定义了 ("#co_age") 但在 ID 字符串中添加了未找到的计数