Tengo este codigo insertado manualmente pero remplazando oraDuration2 por oraDuration1 y así con los demás.
$('#addProgr').append(`
<div class="input-group-prepend">
<label class="input-group-text">Duration</label>
</div>
<input type='time' class='custom-select col-4' id='oraDuration2' name='oraDuration2'>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Ora Inizio</span>
</div>
<input type="time" id="inizio2" class="form-control" name="inizio2" aria-label="Small" aria-describedby="inputGroup-sizing-sm" required>
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-sm">Ora Fine</span>
</div>
<input type="time" class="form-control" id="fine2" name="fine2" aria-label="Small" aria-describedby="inputGroup-sizing-sm" required>
</div>
`);
A la hora de calcularme la hora fine, cuando estoy en el primero, me lo calcula sin problema. Cuando pasa a éste, al estar añadido dinamicamente, no me lo calcula de ninguna de las dos maneras:
$("input[name=oraDuration2], input[name=inizio2]").change(function() {
let inizio2 = $('input[name=inizio2]').val();
let duration2 = $("input[name=oraDuration2]").val();
if(inizio2 != "" && duration2 != ""){
let durationH2 = duration2.substr(0, 2);
let durationM2 = duration2.substr(3, 2);
let hours2 = moment.utc(inizio2,'HH:mm').add(durationH2,'hour').format('HH:mm');
let fine2 = moment.utc(hours2,'HH:mm').add(durationM2,'minutes').format('HH:mm');
$("input[name=fine2]").val(fine2);
}
});
$("#oraDuration2, #inizio2").change(function() {
let inizio2 = $('#inizio2').val();
let duration2 = $("#oraDuration2").val();
if(inizio2 != "" && duration2 != ""){
let durationH2 = duration2.substr(0, 2);
let durationM2 = duration2.substr(3, 2);
let hours2 = moment.utc(inizio2,'HH:mm').add(durationH2,'hour').format('HH:mm');
let fine2 = moment.utc(hours2,'HH:mm').add(durationM2,'minutes').format('HH:mm');
$("#fine2").val(fine2);
}
});
En cambio con el oraDuration1, inizio1,....(estructura insertada manualmente) no me da problemas
(Pone ora porque esta en italiano)
$(document).on('change', 'input[name=oraDuration2] ,input[name=inizio2]', function(e) {...});
? Es la forma de delegar eventos en elementos creados dinamicamente.