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 work

Answer 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.

Answer 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(){
});