I can't seem to tie into the jquery mobile panel events as seen here

.3.0-rc.1/docs/panels/events.html

$(document).on('beforeopen', ".ui-panel", function() {
    alert('open');
});
$(document).on('beforeclose', ".ui-panel", function() {
    alert('close');
 });

or

 $(document).on('open', ".ui-panel", function() {
    alert('open');
});
$(document).on('close', ".ui-panel", function() {
    alert('close');
 });

or even using context on the panel

$('.ui-panel',context).on('open', function() {
    alert('opened');
});

where context is a jquery object variable of the current page

I can't seem to tie into the jquery mobile panel events as seen here

http://jquerymobile./demos/1.3.0-rc.1/docs/panels/events.html

$(document).on('beforeopen', ".ui-panel", function() {
    alert('open');
});
$(document).on('beforeclose', ".ui-panel", function() {
    alert('close');
 });

or

 $(document).on('open', ".ui-panel", function() {
    alert('open');
});
$(document).on('close', ".ui-panel", function() {
    alert('close');
 });

or even using context on the panel

$('.ui-panel',context).on('open', function() {
    alert('opened');
});

where context is a jquery object variable of the current page

• javascript
• jquery
• jquery-mobile
• panel

3 Answers 3

Taking a look at the jQuery mobile API

It provides examples for beforeopen(event, ui) which is a type of panelbeforeopen, they provide these examples in the API documentation:

1) Initialize the panel with the beforeopen callback specified:

$( ".selector" ).panel({
  beforeopen: function( event, ui ) {}
});

2) Bind an event listener to the panelbeforeopen event:

$( ".selector" ).on( "panelbeforeopen", function( event, ui ) {} );

you must insert your code inside $( document ).on( "pageinit", function( event, data ){.....

   $(document).on( "pageinit", function( event, data ){
     $( ".ui-panel" ).on( "panelbeforeclose", function( event, ui ) {
        // your code here
     } );
   });

You have to reference the correct div for it to work. Your selector needs to reference the div that has data-role="panel".

$(window).on("load",function(){

    $( "#your-panel-id" ).on( "panelclose", function( event, ui ) {
        alert ('hi') ;
    }); 
});