CODEWITHSUNDEEP
javascriptjqueryeventsgoogle-chromedom
razaross444
razaross444

Reputation: 533

jQuery .on() Method Not Working In Chrome (but does in IE & FF)

I have jQuery code that executes fine in both IE 9 & FF 19, but doesn't seem to work properly in Chrome Version 25.0.1364.172. Using jQuery 1.7.1

I have 2 dropdown lists and a button. On initial page load, click event handlers get wired up to the option elements in both ddlists and the button via jQuery. In both IE and FF, the event handlers fire for all 3 events. Works great. However, in Chrome, only the button event handler gets fired - NOT the click event handlers for the select options.

 $(document).ready(function () {

    $('#ddlCategory').on('click', 'option', function (event) {

        // BREAKPOINT ON FIRST LINE IN THIS BLOCK NEVER HITS WHILE IN CHROME BUT DOES IN IE & FF
        if ($(event.target).val() == -1)
            return;
       more code...
    });

    $('#ddlSubCategory').on('click', 'option', function (event) {
        ResetSubCatOptionDisplay();
        var selectedId = $(event.target).val();           
        more code....
       // BREAKPOINT ON FIRST LINE IN THIS BLOCK NEVER HITS WHILE IN CHROME BUT DOES IN IE & FF
    });

    $('#btnAddSubCat').click(function (event) {
        ManageWarningDisplay(false, "");

        more code...
        // BREAKPOINT ALWAYS HITS ON FIRST LINE IN THIS BLOCK FOR ALL 3 BROWSERS
     });

    more code ..... 

});

I thought maybe the 'on()' function doesn't work in Chrome, so I also tried using the following syntax, but again, same results. Doesn't seem to be wiring up the handler at all as the breakpoints don't hit in Chrome Dev Tools like it does for the button's event handler.

    $('#ddlCategory option').click(function (event) { ...

Thinking that Chrome might not like click events on 'option' elements, I thought about trying to wire event handler to select element itself, but then it fires even when user clicks the down arrow.

REASONS I'M USING THE EVENTS: I don't want to use the 'onchange' event since it doesn't fire when the user clicks on the one and only option in the select (if there's only one in certain cases, which there will be). Plus, for the ddlSubCategory control, I will be dynamically removing and adding option elements to it on the client at runtime so I needed to use $().on() or $().live() (latter is deprecated) to delegate to future options.

Anyone have any ideas on this???

Upvotes: 4

Views: 2491

Answers (1)

George Katsanos
George Katsanos

Reputation: 14165

The click event is not valid on options. It's valid on select though, so that's the workaround:

$("select#yourSelect").change(function(){
    process($(this).children(":selected").html());
});

Upvotes: 3

Related Questions