Chosen jQuery plugin - event is not triggering

Question

I have searched all over and found how to trigger an event for the Chosen jQuery plugin.

I have downloaded their example files and added this javascript to the end of the file.

This code should display in the console log every time I change a value from the .chosen-select form or when I type a key, but none is working.

In the console I have this error: TypeError: $(...).on is not a function refering to this line of code: $('.chosen-select').on('change', function(e) {

       $('.chosen-select').on('change', function(e) {
        // triggers when whole value changed
        console.log("value changed");
      });



       $('.chosen-select').on('keyup', function(e) {
        // triggers when each key pressed
        console.log("key pressed");
      });

So I think the plugin is not loading correctly..

Why is it not working? How could I fix it?

Ty, Razvan

Answer 1

Try this.. It might works..

$('.chosen-select').change(function () {
     console.log("value changed");
     alert("value changed");
});

Answer 2

This works. See the revised jsfiddle: http://jsfiddle.net/NgLM5/

$('.chosen-select').change(function(e) {
  // triggers when whole value changed
  console.log("value changed");
});

$('.chosen-select').keyup(function(e) {
  // triggers when each key pressed
  console.log("key pressed");
});

Answer 3

The error in the console means that .on() isn't a function, probably because $('.chosen-select') is null.

You should verify that the tag you try to match is in the page and that the selector match the correct tag/id/class/whatever.

Answer 4

It's also depend upon how your jquery script is loading. Is your jquery.js is loaded before this function? If it does, then move this script block after your jquery link.