IE 9 jQuery error: “Object doesn't support … &

Question

I need help. I'm getting the following error in IE9. The code is working in FireFox:

SCRIPT438: Object doesn't support property or method 'on' 

This is raised on the following code:

$(function() {
    $(document).on('change', '#dropdownval select', function(event) {
        //logic function
    });
});

Answer 1

One of two things is happening:

1. $ is not jQuery, but a function defined elsewhere; or,

2. $ is not the correct version of jQuery. on was introduced in 1.7.

---

For jQuery 1.6 the following on:

$(document).on('change', '#dropdownval select', ...)

can be written using delegate (since 1.4, deprecated 1.7):

$(document).delegate('#dropdownval select', 'change', ...)

can be written using live (since 1.3, deprecated):

$('#dropdownval select').live('change', ...) 

Please refer to the documentation for more options and caveats.

Using delegate can attach "below" the body (like on) where as live always attaches at the body level. Thus the above could possibly be written more efficiently, depending upon where the target is located.

Happy coding.

Answer 2

Works in Firefox, not IE?

I would make sure that both browsers are loading the same source. To be honest, it's a bit impossible for Firefox to use .on while using jQuery 1.6, since the method didn't exist.

Within your console (F12 Developer Tools in IE and Firebug in Firefox) type the following:

jQuery.fn.jquery

This should resturn the current version of jQuery loaded on that particular page. For instance, as of today, running that command here on StackOverflow results in "1.7.1". Secondly, to test for the presence of the .on method, you can access it without its parenthesis, using double-negation to cast it to a true boolean:

!!jQuery.fn.on // True if .on is present, False otherwise

With jQuery 1.6, use .delegate rather than .on

Since you're using jQuery 1.6, you don't have access to the .on method, which was introduced in jQuery 1.7. The appropriate fallback would be to use the .delegate method instead, or you could upgrade to the latest version of jQuery (Microsoft CDN, Google CDN, jQuery CDN).

The syntax for .delegate follows that of .on pretty closely:

$("#dropdownval").delegate("select", "change", function(event){
    alert( $(this).val() );
});

Fiddle: http://jsfiddle.net/jonathansampson/rMBn4/

If you decide to upgrade...

You were close with your .on code, but you don't want to bind the event as far down as the document object - this would mean the event would need to propagate a potentially long distance before being handled. Instead, as we did with the .delegate example, we'll bind to something closer to the select element:

$("#dropdownval").on("change", "select", function(event){
    alert( $(this).val() );
});

Fiddle: http://jsfiddle.net/jonathansampson/rMBn4/1/

You'll note that the main difference between the two is the order of the first two parameters to the chained method. With .delegate, the selector precedes the event. With .on, the order is reversed.