$(".class").on is not a function - jQuery error

Question

I'm new to Javascript/jQuery and I'm trying to make a play button for HTML5 video play back. My code so far:

//return a jQuery object
var video = $('#myVideoTag');

//Play/Pause control clicked

$('.btnPlay').on('click', function() {
   if(video[0].paused) {
      video[0].play();
   }
   else {
      video[0].pause();
   }
   return false;
});

I keep getting this error:

$(".btnPlay").on is not a function
[Break On This Error]   

$('.btnPlay').on('click', function() {

I can't for the life of my figure out what is wrong. I have the class .btnPlay properly defined on the page. I'm following a tutorial that seems to use an identical method with no issues. Any ideas?

Answer 1

Method on was introduced in jQuery version 1.7.

I think you have to upgrade your jQuery library to the newest version.

Otherwise, you can use bind:

$('.btnPlay').bind("click", function() {
    // ...
});

or its shortcut method click:

$('.btnPlay').click(function() {
    // ...
});