.click handler in Chrome vs Firefox

Question

Question:
Why does a jquery .click event handler for a select dropdown work fine in IE and Firefox, but not Chrome?

Details:
I can't get the .click event handler to activate with Chrome, but it works just fine with IE and Firefox. In IE and Firefox, when selecting "opt1" in the dropdown, an alert box is displayed. In Chrome, the alert("Hello"); statement is never even parsed. I'm running Win7. I've looked through the JQuery API documentation, but with no luck. Here's the code:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-2.1.1.min.js"></script>
    <script src="ChromeTest.js"></script>    
</head>
<body>
    <select>
        <optgroup label="Some">
            <option id="opt1">1</option>
            <option id="opt2">2</option>
        </optgroup>
    </select>
    <input type="text" id="inputTest1" />
</body>
</html>

...with the following js to support:

// JavaScript source code
$(document).ready(function () {
    var showArea = $("#inputTest1");
    $('#opt1').click(function () {
        alert("Hello");
    });
});

Is there a particular reason you aren't simply listening to the "change" event on the select? — Tieson T., Nov 30 '14 at 03:25
Try Chrome's `Console.log("Hello");` instead and use the page inspector to see if there is any output. Just to rule out the possibility of the alert being blocked. — skibulk, Nov 30 '14 at 03:27
@skibulk Console.log verifies the .click event is not being activated. — Aaron Thomas, Dec 01 '14 at 18:47
@TiesonT. I'm trying to attach specific functions to each option in the dropdown, that are activated when the option is clicked. — Aaron Thomas, Dec 01 '14 at 18:48

score 2 · Accepted Answer · edited May 23 '17 at 12:30

2

This was asked back in 2009 on StackOverflow here.

Consider that the click event does not account for selections made using the keyboard, and think about using the change event on the <select> tag instead as you can retrieve the same information.

JSFiddle

$(document).ready(function () {
    $('select').on('change', function () {
        // If you need access to the element that was selected, use find
        console.log($(this).find('option:selected:first').text());

        // If you just need the value
        console.log($(this).val());
    });
});

edited May 23 '17 at 12:30

Community

1
1

answered Nov 30 '14 at 03:58

szdc

71
2

Thank you for the reply. However, a fault still applies, that is pointed out in an answer to the original question from 2009. If an option is already selected, and the user clicks on the already selected option, it is not registered. – Aaron Thomas Dec 01 '14 at 18:52
If you do not care for keyboard events, use the `click` event in place of the `change` event in the example I provided. This will activate even when the user clicks on an already selected option as you desire. – szdc Dec 07 '14 at 00:37

score 0 · Answer 2 · answered Nov 30 '14 at 03:51

0

Use this script

<script>
$(document).ready(function () {
$( "select" )
  .change(function () {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    alert( str );
  })
  .change();

});
    </script>

Your HTML

  <select>
        <optgroup label="Some">
            <option id="opt1">1</option>
            <option id="opt2">2</option>
        </optgroup>
    </select>

    <input type="text" id="inputTest1" />

answered Nov 30 '14 at 03:51

nikita

273
3
15

Thank you for the reply, but this is fundamentally the same as szds's answer... with the same problem as I pointed out in my comment in that answer. – Aaron Thomas Dec 01 '14 at 18:56

score 0 · Answer 3 · answered Nov 30 '14 at 03:57

0

Its possible you have alerts disabled for that specific page your working on. Use console.log instead and see if it logs anything

answered Nov 30 '14 at 03:57

UserDy

327
5
22

Thank you for helping narrow things down, but unfortunately this doesn't apply. Console.log verifies the .click event is not firing. – Aaron Thomas Dec 01 '14 at 18:53

.click handler in Chrome vs Firefox

3 Answers3