JQuery selectmenu change function not working on iPhone
I am using jquery selectmenu function in my webpage and doesn't seem to work as expected in ios browsers.
After I select my menu item, the menu disappears, but my change: the function doesn't fire at all. It just just hides the menu again.
My code is as follows:
$('#adultMenu').selectmenu({
change: function() {
adultval = $(this).val() + ' Adults. ';
var inputvalue = adultval + childval + youthval + infantval;
$('#personInput').val(inputvalue);
}
});
I think this is a fairly common problem on iOS, but I haven't found an answer yet after reading the forums for a long time.
Any help would be great!
source to share
DEAR FUTURE PEOPLE: Here's what I've figured out so far:
Edited with new findings :
After much more experimentation, I found the reason. This happens when you set a selection menu value with something not in the menu. Below is a description of the problem:
var $fubar = $('.fubar');
$fubar.selectmenu({
'change': function () {
$fubar.val('Pancakes');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<select class="fubar">
<option>Cake</option>
<option>Ice Cream</option>
</select>
source to share
If you are using the FastClick library this could be a problem. I had to disable FastClick for the selection as per this comment: https://github.com/ftlabs/fastclick/issues/268#issuecomment-65022184 . For selectmenu, I added one more condition if:
if (targetElement.nodeName.toLowerCase() == 'select' || targetElement.hasClass('ui-menu-item')) {
return false;
}
source to share