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

What about referencing them by their ID? $("#pickuptime_start, #pickuptime_end, #deliverytime_start, #deliverytime_end").change( function() { alert("changed") }) — DanielGatti, Jul 27 '16 at 17:45
@danielgatti oh the ids i forgot to remove; those won't work because some other code later on needs to have those same ids so will remove. also that shouldn't matter — james, Jul 27 '16 at 18:08

score 0 · Answer 1 · answered Jul 27 '16 at 19:25

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.

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

1 Answers1