jQM pagecontainer events demo

test on how to trigger new pagecontainer events

by dpa99c

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<div id="test_page" data-role="page" data-theme="a">
    <div id="test_page_header" data-role="header">
         <h1>Test Page 1</h1>

    </div>
    <div id="login_content" data-role="content">
        <p>This is a test</p>
    </div>
    <div id="test_page_header" data-role="footer">
         <h1>Test Page</h1>

    </div>
</div>

JavaScript

function on_pagecontainershow(page_id, fn){
  $(document).on('pagecontainershow', function(event, ui) { 
    if(ui.toPage[0].id == page_id){
      fn();
    }
  });
}

on_pagecontainershow('test_page', function(){
	alert('pagecontainershow triggered');
});


$(document).on('pagecontainershow', '#test_page', function(event, ui) {
   alert("I don't get called (1)");
});

$(document).delegate("#test_page", "pagecontainershow", function() {
  alert("I don't get called (2)");
});

$("#test_page").on("pagecontainershow", function() {
	alert("I don't get called (3)");
});