Earlier this week I came across some quirky behavior in jQuery. Pseudo code is provided below:
<input type="text" class="inputClass">An input</input>
...
<tr class="trClass">Row containing option dependent on input</tr>
<script>
$('.inputClass').change(function(){
if($('.inputClass').val() > 0){
$('.trClass').show();
}
else{
$('.trClass').hide();
}
}).change()
</script>
Seems simple enough. jQuery binds a function to the changed event and fires it off once on load to set the default behavior.
Puzzle:
It works on page load. It works the second and following times the input is updated.
It does nothing the first time the input in changed and loses focus. As far as we can tell change doesn't fire at all.
Solution:
After puzzling after this behavior for more than should have been required, chasing down the event with alert statements, .ready(), and .blur() events on load to try to initialize or eat the first user initiated .change() we call in the senior programmer. Five minutes later he's done.
He changed all the .change() events to .blur(). The missing update fires .blur() normally.
Ongoing Mystery:
We still don't know if .change() was being eaten by something else of if .change() just doesn't work correctly with text input. More importantly, we don't have a good way to tell.
If you do have a good way to tell, include it in the comments below.