Age Does not Output in the Field

问题:

I am cloning a div which includes a datepicker. I have fixed the datepicker when cloned using:

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

Every change on that datepicker, it computes for the age and outputs the value to the age field. However, the reiteration cannot change the value of the field to the computed age. I cannot catch the datepickers ID because everytime it is cloned, the value of id is random so I used a class.

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

Here is the 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>

回答1:

I would ditch the ids with dynamically generated elements and use a class with jQuery's eq(). Also, I'd store a clone of the elements before adding the datepicker to avoid having to remove and re-add them.

$(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>

回答2:

where you define ID $("#co_age" + counts) in HTML format.?? I think you define only ("#co_age") but added counts in ID string not found