New page events not working properly.

New page events not working properly.

I have been trying to update my JS to get ready for the newer versions as they come out (I hope). The br_smsDetails page is an edit page used to edit a single row in the parent page. What I need is to have the hide event run some code that refreshes the parent page after an edit.  I ran into a problem with the pagecontainerhide event that I don't understand. The comments in the code below explain my problem.  How do I get the new hide event to work like the pagehide event?  

Thanks.
  1. $(document).on('pagecreate',"#br_smsDetails",function(){
    // this event works as exkpected.
    $(this).on('pagehide',function(){
    console.log('this page hide');
    omenu.runCode('textmessage');
    });
    //this event fires for both the parent page as well as the new page
    // I had to add the if condition to only fire on the new page
    $(":mobile-pagecontainer").on('pagecontainerhide',function(e, ui){
    if (ui.prevPage[0].id == 'br_smsDetails') {
    console.log(':mobile page hide');
    }
    });
    // this does not work
    $("body").on('pagecontainerhide',"#br_smsDetails",function(){
    console.log(':mobile page hide with id');
    });

    // this does not work
    $("#br_smsDetails").on('pagecontainerhide',function(){
    console.log('page name hide');
    });
    })