Do something on Jquery mobile page close

Question

I want to call a function when the dialog is closed, however for testing purposes, I am just doing an alert for now, but the following does not work.

 $("#fbfullpostviewpage").bind("pagehide",function(){
  alert("Dialog closed");
});

But the same code with a different page id works? How would I make it work for this page too?

markup:

 if ((post.attachment.media !== undefined) &&
     (post.attachment.media.length > 0) &&
     (post.attachment.media[0].type == "photo")) {

 markup += '<li><a href="#fbfullpostviewpage" class="item" data-rel="dialog" data-transition="pop" data-overlay-theme="e" data-inline="true" data-fullscreen="false"><img src="' + thumb_url + '">' +'<h5 style="white-space:normal;">' + name + '</h5><p>' +'posted this photo....</p><p>'+likes+'<img src="images/facebook-like-16.png"></p></a></li>';

  }else { 

 markup += '<li><a href="#fbfullpostviewpage" class="item" data-rel="dialog" data-transition="pop" data-overlay-theme="e" data-inline="true" data-fullscreen="false"><img src="https://graph.facebook.com/' + id + '/picture">'+'<h5 style="white-space:normal;">' + name + '</h5><p>' + short_post +'....</p><p>'+likes+'<img src="images/facebook-like-16.png"></p></a></li>';
       } 

Answer 1

I suspect your problem is that your fbfullpostviewpage page is not part of the DOM at the point at which your are binding your event. What you should do in this case is to use event delegation instead of trying to directly bind to the page element.

Basically with event delegation what you do is bind the event to a higher level DOM element (all the way up to the Document if necessary, but you should generally try and bind it as close to the target selector as possible) that does exist at that time, and then when the event bubbles up the DOM check to see if the event matches a certain selector.

In addition to allowing you to bind events for dynamically inserted elements, event delegation is also usually more efficient since you can reduce the number of events that are bound.

For example you can use the jQuery .on function like the following

$(document).on('pagehide', '#fbfullpostviewpage', function() { 
    alert('Dialog closed'); 
});