$.mobile is undefined

$.mobile is undefined

Hi I am using the code from the transition swipe demo. something like

    $( document ).on( "pageinit", "[data-role='page']", function() {

      var page_id = $( this ).attr( "id");
      var page = "#" + page_id;

      // Get the filename of the next page that we stored in the data-next attribute
      next = $( this ).jqmData( "next" );
      // Get the filename of the previous page that we stored in the data-prev attribute
      prev = $( this ).jqmData( "prev" );
      // Check if we did set the data-next attribute
      if ( next ) {
          // Prefetch the next page
          $.mobile.loadPage( next );
          // Navigate to next page on swipe left
          $( document ).on( "swipeleft", page, function() {
              $.mobile.changePage( next, { transition: "slide" });

loadPage works ok but when I put a break point on the changePage like I get the error 
Uncaught TypeError: undefined is not a function  which is referring to  $.mobile

Can anyone think of anything obvious I am doing wrong ?