JSFiddle - React, Tailwind, and code Playground

by jasper

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Page 1</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview" id="myList">
            <li>
                <a href="#page2" data-id="1">This is some fake text... Click for More</a>
            </li>
            <li>
                <a href="#page2" data-id="2">This is some fake text... Click for More</a>
            </li>
            <li>
                <a href="#page2" data-id="3">This is some fake text... Click for More</a>
            </li>
        </ul>
    </div>
</div>

<div data-role="page" id="page2">
    <div data-role="header">
        <a href="#page1">Back</a>
        <h1>Page 2</h1>
    </div>
    <div data-role="content">
    </div>
</div>

JavaScript

$(document).delegate('#page1', 'pageinit', function () {

    //bind to click event for all links in the `#myList` UL
    $(this).find('#myList').find('a').bind('click', function () {

        //save the ID of this list-item to a global variable so it can be used later
        window.myId = $(this).attr('data-id');
    });
});
$(document).delegate('#page2', 'pageshow', function () {

    //get the ID saved as a global variable
    var currentId = window.myId || 0;

    //now do logic for second page
    $(this).children('.ui-content').html('ID: ' + currentId);
});