JSFiddle - React, Tailwind, and code Playground

by sparkhill

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
    <div data-role="page" id="page1">                    <div data-role="content">                     <div data-role="navbar">                     <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>                         <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>                                  </ul>                     </div>                 <div id="placeholder1">Page 1</div>             </div>           </div>      <div data-role="page" id="page2">                    <div data-role="content">                     <div data-role="navbar">                     <ul><li><a data-icon="home" data-transition="none" id="page1" href="#page1">page1</a></li>                     <li><a data-icon="grid" data-transition="none"  id="page2" href="#page2">page2</a></li>                                                      </ul>                     </div>                 <div id="placeholder2">Page 2</div>             </div>         </div>           </div>

JavaScript

var pageData = new Array();
pageData[1] = "<p class='appended_class'>some code for page 1...</p>";
pageData[2] = "<p class='appended_class'>some code for page 2...</p>";

$('div[id^="page"]').live('pageshow', function () {
    if ($(this).find('p.appended_class').length === 0) {
        var page_num = $(this).attr('id').replace('page', '');
        $("#placeholder" + page_num).append(pageData[page_num]).trigger('create');
    }
});