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

any output in the iPhone debugger (Safari debug mode)? – Phill Pafford Oct 07 '11 at 16:42 — Phill Pafford, Oct 07 '11 at 16:42
None. I'm thinking this may just be a mobile safari bug. – wdm Oct 07 '11 at 21:34 — wdm, Oct 07 '11 at 21:34
Safari doesnt handle all the standard events. – run_the_race Feb 25 '23 at 08:18 — run_the_race, Feb 25 '23 at 08:18

Andy · Answer 1 · 2011-10-06T23:03:48.253

7

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

edited Oct 06 '11 at 23:03

answered Oct 06 '11 at 22:27

Andy

29,707
9
41
58

Thanks for the suggestion. I tried several different events as I thought that might be the issue. Was not able to get any to fire. – wdm Oct 06 '11 at 22:51
The month select is static in the DOM so the `live()` function I don't believe is necessary. I gave it a shot anyhow and no luck. – wdm Oct 06 '11 at 23:38
@wdm hm too bad. I found it here http://stackoverflow.com/questions/6431611/jquery-change-event-on-the-iphone/6431657#6431657 – Andy Oct 06 '11 at 23:45

score 3 · Accepted Answer · edited May 23 '17 at 12:09

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.

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

2 Answers2

Linked