I'm stumped on why my two variable below are not updating after the first time a value is selected:
function setPrimeLimits() {
var selectedStart = $('#space_global_start').val();
var selectedEnd = $('#space_global_end').val();
$('#prime_global_start, #prime_global_end').timepicker({
minTime: selectedStart,
maxTime: selectedEnd,
});
}
$('#space_global_start, #space_global_end').on('changeTime', setPrimeLimits);
selectedStart and selectedEnd are both timepickers and the first time they are selected, the function works fine to limit two other timepickers (#prime_global_start and #prime_global_end) but on the 2nd and subsequent update of the field (they are dropdowns) the variables no longer update.
Usually, I would try event delegation, but it seems like I'm already doing that, so I'm not sure where I've gone wrong.
This is all wrapped in a document.ready function.
HTML code:
Timepicker fields that I'm getting the vars from:
<input type="text" name="space_global_start" id="space_global_start" class="spaceTimePickerStart" value="<?php echo (null !== get_space_meta( 'space_global_start' )) ? get_space_meta( 'space_global_start' ) : '' ?>" />
<input type="text" name="space_global_end" id="space_global_end" class="spaceTimePickerEnd" value="<?php echo (null !== get_space_meta( 'space_global_end' )) ? get_space_meta( 'space_global_end' ) : '' ?>"/>
Timepicker fields that I'm trying to limit:
<input type="text" name="prime_global_start" id="prime_global_start" class="primeTimePickerStart" value="<?php echo (null !== get_space_meta( 'prime_global_start' )) ? get_space_meta( 'prime_global_start' ) : '' ?>" />
<input type="text" name="prime_global_end" id="prime_global_end" class="primeTimePickerEnd" value="<?php echo (null !== get_space_meta( 'prime_global_end' )) ? get_space_meta( 'prime_global_end' ) : '' ?>"/>