1

i have a Bootstrap select box with an option inside that on click event triggers an action with jQuery. Unfortunately this functionality does not work on my iOS device.

Html:

<div class="form-group">
    <label for="selectPropertyLocation">Location:</label>
    <select class="form-control" id="selectPropertyLocation">
        @foreach ($allLocations as $location)
        <option value="{{ $location->location_id }}">{{ $location->name }}</option>
        @endforeach
        <option selected style="color:red;">Empty</option>
        <option id="newPropertyLocation" style="color:green;">Add A New Location</option>
    </select>
</div>

jQuery:

$('#newPropertyLocation').click(function(){
    $('#addPropertyLocation').modal({
        show: 'true'
    });   
});
Makis
  • 1,214
  • 3
  • 16
  • 40

2 Answers2

0

Try this code, add css cursor:pointer to the element and then check click event

$('#newPropertyLocation').css('cursor','pointer');
$('#newPropertyLocation').change(function(){
    $('#addPropertyLocation').modal({
        show: 'true'
    });   
});

for more details check here

jQuery click events not working in iOS

jquery.click() not working in iOS

Community
  • 1
  • 1
tzafar
  • 674
  • 3
  • 12
  • try to remove your browser cache and history and then reload the page as sometime js will load the content from cache instead of the server – tzafar May 14 '15 at 05:44
  • Again it did not work after deleting history and cookies. I have just notice that the select box in iOS does not have a click option. Only a something like a barrel with a scroll option.. – Makis May 14 '15 at 05:53
  • you have to use the `change` event instead of `click` event for select box – tzafar May 14 '15 at 05:55
  • try these two post and check again http://stackoverflow.com/questions/7680992/change-event-not-firing-on-select-elements-with-mobile-safari-form-assistant and http://stackoverflow.com/questions/5960731/strange-behavior-of-select-dropdowns-onchange-js-event-when-using-next-on-m – tzafar May 14 '15 at 06:03
0

Please try with adding a value="something" to your element of which you want to trigger the event, and attach "change" event of parent , then trigger your modal contents if the user selection has the value set above:

HTML

    <option id="newPropertyLocation" style="color:green;" value="optional-event">Add A New Location</option>

jQuery

$('#selectPropertyLocation').change(function(){
  if( $(this).val()=='optional-event' ){
     $('#addPropertyLocation').modal({
        show: 'true'
     });
  }
});
Ninki
  • 93
  • 2
  • 8