swipe panel problem

swipe panel problem

Hello.

I use the new jQuery mobile 1.3.0 and i discovered the swipe panel demo.

I implement it on my web site (m.optimumgym.fr). It work fine when you launch the page directly but not when you click on the link on the menu (the swipe panel)

The exemple code of page :

  1. $( document ).on( "pageinit", "#demo-page", function() {
  3. $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
  4. // We check if there is no open panel on the page because otherwise
  5. // a swipe to close the left panel would also open the right panel (and v.v.).
  6. // We do this by checking the data that the framework stores on the page element (panel: open).
  7. if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
  8. if ( e.type === "swipeleft"  ) {
  9. $( "#right-panel" ).panel( "open" );
  10. } else if ( e.type === "swiperight" ) {
  11. $( "#left-panel" ).panel( "open" );
  12. }
  13. }
  14. });
  15. });
my code : 

  1. $( document ).on( "pageinit", "#pagePrincipal", function() {
  2.     $( document ).on( "swiperight", "#pagePrincipal", function( e ) {
  3.         // We check if there is no open panel on the page because otherwise
  4.         // a swipe to close the left panel would also open the right panel (and v.v.).
  5.         // We do this by checking the data that the framework stores on the page element (panel: open).
  6.         if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
  7.            if ( e.type === "swiperight" ) {
  8.                 $( "#myMenu" ).panel( "open" );
  9.             }
  10.         }
  11.     });
  12. });

Do you know what is the problem of this ?

Thank you in advance.

Best regards.