JQuery Click event not being triggered in Safari?

javascript jquery select safari jquery-events

1,130

Solution 1

I found my problem. For Select boxes, you need to register a handler for a "change" event rather than a "click" event. It's strange that Firefox and IE work with the click event.

To sum up, the following code works across all browsers:

<html>
<head>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script language="javascript">
    $(document).ready(function(){
        $('#myoption').change(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
    });         
    </script>
</head>
<body>
    <select id="myoption">
    <option value="A">A</option>
    <option value="B">B</option>
    </select>
</body>
</html>

Solution 2

Safari and Chrome are both webkit based browsers. Webkit uses the native dropdown elements from your OS instead of implementing dropdowns itself, and unfortunately native dropdowns do not support a click events. For the same reason they also do not support CSS for option elements or other neat tricks.

The only cross-browser way to get those working is to implement this by hand using an <ul> and a lot of javascript.

1,130

Author by

gonzalo2000

Updated on June 05, 2022

Comments

gonzalo2000 almost 2 years
Using Bootstrap 3, I'm trying to align horizontally two buttons (aligned left and right, respectively) with a glyphicon centered between them. Right now I'm only able to align them while using a
element for the glyphicon, which causes for all three elements to appear on separate lines. How can I make all three be lined up horizontally while keeping to left, center, and right positions?

I have seen similar questions asked, and have been trying to implement text: nowrap; in CSS without success.
```
<div class="col-xs-10 col-xs-offset-1">
  <button type="button" class="btn btn-primary btn-lg" id="por-btn">por</button>

  <p class="text-center"><span class="glyphicon glyphicon-ok-sign"></span></p> 

  <button type="button" class="btn btn-primary pull-right btn-lg" id="para-btn">para</button>
</div>
```
Tom over 15 years

Yes, change on select works in IE - the live version of the code I used can be seen in the select box at peopleperhour.com/reg_sup.php (when "other" is selected, a textbox is displayed asking for further info).