Bootstrap select don't trigger change event on mobile devices

Question

I'm using Bootstrap select that converts native selects to twitter bootstrap dropdown lists.

I have the problem that the change event is not triggered on iOS or Android devices in normal browsers on the pc is it working. If I'm using the native element support of the library the change event is triggered on these devices.

  $('.selectpicker').selectpicker({
      style: 'btn-info',
      size: 4
  });


var submitSearchForm = function() {
    $(this).parents('form').submit();
};


$('.selectpicker').on('blur change', submitSearchForm);

Anyone an idea?

Is your code loaded after the document ready of jQuery or equivalent? — PaoloCargnin, Feb 10 '15 at 13:47
the library changes your select into a button dropdown, so use `$('.selectpicker').on('click','li a', submitSearchForm);` — Bass Jobsen, Feb 14 '15 at 13:49
I give it a try but I'm not sure if it works because in the normal browser on a pc the change event is working. — Azd325, Feb 14 '15 at 14:41
@BassJobsen I tried these out. In my normal chrome your code works but not on iOS it like it was already where I used the `change` event — Azd325, Feb 16 '15 at 13:55
possible also see: http://stackoverflow.com/questions/14795944/jquery-click-events-not-working-in-ios and http://stackoverflow.com/questions/18201361/how-to-replace-click-with-touchstart-on-ios-devices — Bass Jobsen, Feb 16 '15 at 14:22
well, that's a pity. Which version of BS do you use? issues related to v2 are described here: https://github.com/twbs/bootstrap/issues/4550. — Bass Jobsen, Feb 16 '15 at 17:26

score 1 · Answer 1 · answered Feb 10 '15 at 13:55

1

Ok, it's probably because of the rendering of the bootstrap select in the page. This should work

$(document).on('change','.selectpicker',submitSearchForm)

or, in alternative

$("body").on('change','.selectpicker',submitSearchForm)

answered Feb 10 '15 at 13:55

PaoloCargnin

442
2
10

I added an alternative ;) – PaoloCargnin Feb 10 '15 at 13:57
Didn't helped on ios and android the change event is still dont triggered. – Azd325 Feb 10 '15 at 14:21
Maybe, it has something to do with screen sizes e.g. `@media screen and (max-width: 480px) {...}`. – Sachi Tekina Feb 14 '15 at 18:11

Shlomi Hassid · Accepted Answer · 2015-02-17T21:15:48.747

Tested (ios-safari and chrome, android chrome, desktop chrome & FF) and it worked fine for me.

jsfiddle: Demo with the plugin and latest Bootstrap

The problem is not with the plugin and it might be with some additional code.

Make some tiny changes for testing and debuging:

Remove blur event - it will submit your form when you click the select box, for some unknown reason the plugin focus and immediately blur the select-box when clicking the select-box.
Make sure you are firing your js on DOM-ready - use $(function(){ }); or put your script before the closing BODY tag.
Change the selector - by default the plugin recognizes the .selectpicker and just for testing lets make sure it doesn't add some unwanted events that may cause unwanted behavior.
Use the chrome devtools with the extension jQuery debuger installed. select the select box with the inspector -> go to "jQuery events" tab and make sure the "change" event is attached and only him, another "change" event may cause the problem.
Make sure there is no ~"submit" event attached to the form - it may stop the form from submitting.
Make sure the action attribute of the form tag is set correctly or not defined at all. Be sure the select box is a child of the form and that the form is closed properly.

Obviously the problem is caused by your additional code that we can't see - if those tests won't work for you add your code or a demo that reproduce the problem you have and we will be more capable to help you.

Thanks for you big reply and for js fiddle it proved that it seems to work. Now I have to find out for me what the problem on my side. I'll accept your answer if i find it. — Azd325, Feb 18 '15 at 14:32

Bootstrap select don't trigger change event on mobile devices

2 Answers2