JSFiddle - React, Tailwind, and code Playground

by rossmartin

HTML

<!-- Start of first page -->
<div data-role="page" id="foo">
    <div data-role="header">
        	<h1>Foo</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>I'm first in the source order so I'm shown as the page.</p>
        <p>View internal page called <a href="#bar">bar</a>
        </p>
    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
    <div data-role="header">
        	<h1>Bar</h1>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
        <p><a href="#foo">Back to foo</a>
        </p>
        <br /><br />
    </div>
    <!-- /content -->
    <div data-role="footer">
        	<h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>
<!-- /page -->

JavaScript

$(function () {
    $('#bar').one('pagebeforecreate', function (event) {
        console.log("bar pagebeforecreate which will fire once");
        $('#bar [data-role="content"]').append('<ul data-role="listview">' +
                '<li><a href="acura.html">Acura</a></li>' +
                '<li><a href="audi.html">Audi</a></li>' +
                '<li><a href="bmw.html">BMW</a></li>' +
                '</ul><br /><br />');
    });
    $('#bar').one('pagebeforeshow', function(event){
        $(this).trigger('pagecreate');
        console.log('bar pagebeforshow');
    });
    $('#bar').on('pagebeforeshow', function(event){
       console.log('this will fire every time on bar pagebeforeshow'); 
    });
});