JSFiddle - React, Tailwind, and code Playground

by lordbalmung

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-git2.js"></script>
<head>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js" type="text/javascript"></script>
</head>

<body>
    <div data-role="page" id="firstpage">
        <div data-role="header">
            <h1>Home Page</h1>
        </div>
        <div data-role="main">
            <a href="#secondpage" class="ui-btn-icon-right ui-icon-arrow-r ui-btn ui-btn-inline ui-corner-all ui-shadow" >Page 2</a>
        </div>
    </div>
    <div data-role="page" id="secondpage">
        <div data-role="header">
            <h1>Second Page</h1>
        </div>
        <div data-role="main">
            <a href="#firstpage" class="ui-btn-icon-right ui-icon-arrow-r ui-btn ui-btn-inline ui-corner-all ui-shadow" >Page 1</a>
        </div>
    </div>
</body>
</html>

JavaScript

$(document).on('pagecontainerbeforeshow',function(event,ui){
    alert('Ive caught a beforeshow using document');
});
        
$('body').on('pagecontainerbeforeshow',function(event,ui){
    alert('Ive caught a beforeshow using body');
});
        
$(':mobile-pagecontainer').on('pagecontainerbeforeshow',function(event,ui){
    alert('Ive caught a beforeshow using mobile-pagecontainer');
});