Why doesn't Bootstrap button dropdown work on iOS?

Question

It looks like even the bootstrap demo here doesn't work on iOS. You don't seem to be able to select an item from it on iPhone or iPad.

Is there a fix for this?

Answer 1

There is a quick fix as noted in many of the issue comments on github: https://github.com/twitter/bootstrap/issues/2975#issuecomment-8670606

add this script just before your close html tag:

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { 
    e.stopPropagation(); 
});

I have tested the above method on both ios5 and 6. It works like a charm

---

If you wish to modify the bootstrap javascript you could, instead of the fix above, remove touchstart.dropdown.data-api from the html binding for clearMenus near the bottom of the file.

just change this

$('html')
  .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)

to this

$('html')
  .on('click.dropdown.data-api', clearMenus)

Answer 2

You need to add a customize jquery in your file.If you want to use that then use:

<div class="container">
  <div class="btn-group lt category_bg">
    <p>Adults</p>
    <button class="btn btn-large" data-toggle="dropdown"><cite>0</cite> <span class="caret"></span></button>
    <ul class="dropdown-menu ">
      <li id='adult_0' onClick="flight_user(this.id)"><a href="#" >0</a></li>
      <li id='adult_1' onClick="flight_user(this.id)"><a href="#" >1</a></li>
      <li id='adult_2' onClick="flight_user(this.id)"><a href="#" >2</a> </li>
      <li id='adult_3' onClick="flight_user(this.id)"><a href="#">3</a></li>
      <li id='adult_4' onClick="flight_user(this.id)"><a href="#">4</a></li>
    </ul>
  </div>

</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-dropdown.js"></script>


 <script>
    function flight_user(selected){
    var value = jQuery("#" + selected).find('a').text();
    jQuery("#" + selected).parent().parent().find('cite').html(value);
    }

</script>

I can give you live demo for this if you want

Answer 3

This script solve this problem. Just add this code

$(document).on('click', 'a.your-drop-down-link', function(event){
            event.stopPropagation();
            event.preventDefault();
            if(event.handled !== true) {

                if ( $(this).parent().hasClass('open') ) {
                    $(this).parent().removeClass('open');
                }else{
                    $(this).parent().addClass('open');
                }

                event.handled = true;
            } else {
                return false;
            }
       });