JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css">
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<div id="page1" data-role="page">
    <div data-role="header">
        <h1>page 1</h1>
        <a href="#page2" data-role="button" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">Next</a>
    </div>
    <div data-role="content">
    </div>
</div>
<div id="page2" data-role="page">
    <div data-role="header">
        <a href="javascript:window.history.back();" data-role="button" data-icon="arrow-l">Back</a>
        <h1>page 2</h1>
    </div>
    <div data-role="content">
    </div>
</div>

JavaScript

$("body").on("pagecreate pagebeforeshow pageshow pagebeforehide pagehide", "[data-role='page']", function(e) {
        $(this).find("[data-role='content']").append("<p>" + $.now() + ": " + this.id + " " + e.type + "</p>");
    });