Change event on Timepicker works in JS Fiddle, not in production/development environments

Question

I have a simple timepicker element like this:

<input class="pickuptime_end" id="pickuptime_end" name="pickuptime_end" placeholder="Time" size="10" type="text" value="10 pm" style="display: inline-block;">

I'm just testing that on change of the value, it alerts me:

$("input.pickuptime_start, input.pickuptime_end, input.deliverytime_start, input.deliverytime_end").change( function() {
    alert("changed")
})

In the JS Fiddle everything works fine (https://jsfiddle.net/gnroaxut/1/).

In my live site however (https://hidden-tundra-8656.herokuapp.com/orders/61862e?key=UDIS), it does not. The code is the exact same:

Rendered HTML:

<input class="pickuptime_end" id="pickuptime_end" name="pickuptime_end" placeholder="Time" size="10" type="text" value="5 am">

Source JS code:

$('.pickuptime_end').timepicker({
  interval: 30,
  disableTextInput: true
});
$("input.pickuptime_start, input.pickuptime_end, input.deliverytime_start, input.deliverytime_end").change( function() {
  alert("changed")
})

Any thoughts as to why it's not working? Note that:

• I have precompiled assets, that's not the issue
• All other jQuery is fine, there are no issues because code hasn't been required or imported via CDN
• This is ALSO not working in development mode
• There are no console errors

Answer 1

The jsfiddle you linked was using a different version of timepicker than the one you are using on your site (1.10.0 [jsfiddle] vs 1.3.1 [your site]). Updating the jsfiddle with 1.3.1 breaks the alert: https://jsfiddle.net/ux2LweLb/2/

However, using 1.3.1 lets you use the native change property of the timepicker:

$('.pickuptime_end').timepicker({
      interval: 60,
    change: function(x){alert('changed')}
    });

See: https://jsfiddle.net/t986738k/ for a working example.