Change event not firing on select elements with Mobile Safari "form assistant"

Question

I have dynamic select drop-down menus. For example, if you select a specific month, the 2nd select element will populate with number of days in that month.

This works as intended, however when the user is on an iPhone and uses the "Next" button built into Mobile Safari's "form assistant", the change event (using jQuery) doesn't appear to fire and the 2nd select does not update.

$('.month').change(function() {
    // update "days" select element
});

FYI I'm also using jQuery mobile

Solution 1

The best work-around I could find was based on this post...

Strange behavior of select/dropdown's onchange() JS event when using 'Next' on Mobile Safari Dropdown list item select box

Using the plugin (from the link above), I had to force the select menu to blur as soon as an option was chosen with Mobile Safari's "form assistant".

I noticed however when brute force testing these menus an extra blur event would fire after a few back-and-forth selections. An extra focus seemed to fix that.

$('select').quickChange(function () {
    $(this).blur();
    $('select').focus(); // somehow prevents an extra blur from firing on focus
});

With a separate change function I am updating the second select menu dynamically.

$("#select-choice-month").change(function () {
    // update second select dynamically
});

*Only tested on Mobile Safari / iOS 5.0.1 thus far.

Solution 2

You could also bind some additional events like blur ( don't know if blur does fire on iphone though)

$('.month').bind('change blur',function(){

});

or have you tried:

$('.month').live('change',function(){
});