CODEWITHSUNDEEP
jqueryhtml
caramba
caramba

Reputation: 22480

html, select option, with jquery click only works in firefox

This is only working in Firefox and I can not find out why. Click on the orange span works in every browser. Click on the select option only works in Firefox... Why? 

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
</head>
<body>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.click').click(function() {
                alert("clicked");
            });
        });
    </script>

    <select>
        <option class="click" value="">click</option>
    </select>

    <br /><br /><br /><br />


    <span class="click" style="display:inline-block;width:50px;height:20px;background-color:orange;padding:4px;">click</span>

</body>
</html>

Upvotes: 1

Views: 446

Answers (2)

Eldar
Eldar

Reputation: 591

You cant click a select option, you can capture a the change event in select, this works on all browsers:

<script type="text/javascript">
    $(document).ready(function() {
        $(document.getElementById("colors")).change(function() {
            alert($(this).val());
        });
    });
</script>

<select id="colors">
    <option value="click1">click2text</option>
    <option value="click2">click2text</option>
</select>

Upvotes: 2

gdoron
gdoron

Reputation: 150253

onclick isn't a standard event of <option>, it's nice that firefox added that, but it's not defined in the spec.

You should use the <select>'s onchange` event instead:

$(document).ready(function() {
        $('select').change(function() {
            if (this.value == "theValue")
                alert("clicked");
        });
    });

Upvotes: 1

Related Questions