Jquery.on method returns undefined is not a function My goal was to create a simple button which once clicked would hide/show a navigational menu, and change the footer's padding alternatively, I'd have used toggle if not for the latter condition. Before I inserted .on() I just had the .click() method with a if/else, which only worked for the first click, so I added .on to solve the problem. Unfortunately it doesn't work, each time the console prints 'Uncaught TypeError: undefined is not a function'. Any help, suggestions, or alternatives, will be much appreciated. 

(function ($, Drupal){
Drupal.behaviors.footerCollapse = {
    attach : function() {
        function collapseOrCondense(event){
            if($('#block-panels-mini-footer-nice-menu:visible')){
            $('#footer').css({'padding-bottom':'2.5%'});
            $('#block-panels-mini-footer-nice-menu').hide();
         }
          else{
            $('#footer').css({'padding-bottom':'5.5%'});
            $('#block-panels-mini-footer-nice-menu').show();
          }
        };
        $('#footer').append('&lt;button type=button class=cbutton&gt;*&lt;/button&gt;');
        $('#footer .cbutton').css({'position':'absolute', 'left':'1%', 'top':'1%', 'width':'2%','height':'1.5%'});
PROBLEM: $('#footer .cbutton').on('click',collapseOrCondense);
  }
 }
})(jQuery, Drupal);
depending on the version of Drupal you are running, it is likely a jquery version issue. Drupal 7 for example defaults with jQuery 1.4 if memory serves, and .on() was added to jQuery in version 1.7.

You could try jQuery Update module:


Upgrades the version of jQuery in Drupal core to a newer version of jQuery.

Drupal 5 to jQuery 1.2.6

Drupal 6 to jQuery 1.3.2

Drupal 7 to jQuery 1.5.x, 1.7.x, 1.8.x, 1.9.x, 1.10.x and jQuery UI 1.10.2

Drupal 8: TBD