JQuery Click event not being triggered in Safari?

Question

I'm trying to do something when a user selects an option from a select box - As simple as can be right? I'm using JQuery 1.3.1 to register a click handler with the id of the select box. Everything was fine until I tested using Chrome and Safari and found it didn't work.

Firefox 3.05 - YES
I.E 7.0.5730.13 - YES
IE6Eolas - YES
Sarafi 3.2.1 - NO
Chrome 1.0.154.43 - NO

See below code:

<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').click(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>

Anyone know what I should be doing for this to work? The alert does eventually get triggered but only after double-clicking the select box?

score 5 · Accepted Answer · answered Jan 23 '09 at 08:35

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>

I think "change" does not work in IE. IIRC, it is not triggered before the element looses focus. — Tomalak, Jan 23 '09 at 08:42
Yes, change on select works in IE - the live version of the code I used can be seen in the select box at http://www.peopleperhour.com/reg_sup.php (when "other" is selected, a textbox is displayed asking for further info). — Tom, Jan 23 '09 at 21:19

score 1 · Answer 2 · answered Jun 21 '10 at 17:40

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.

JQuery Click event not being triggered in Safari?

2 Answers2

Linked