JSFiddle - React, Tailwind, and code Playground

by bsimo

HTML

<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.css">
<body>
    <div data-role="page">
        <div data-role="header">
             <h1>Welcome</h1>

        </div>
        <div data-role="main" class="ui-content">
            <a id="btnSearch" data-role="button" data-icon="search" data-inline="true" data-iconpos="notext"></a>

            <div id='resultList'></div>
        </div>
        <div data-role="footer">
             <h1>Footer</h1>

        </div>
    </div>
</body>

JavaScript

$(document).ready(function () {
    
    $('#btnSearch').on('click', function () {      
        $('#resultList').html( "<div class='resultItem' data-role='collapsible' data-id='3537' data-content-theme='c'><h5>Biatorbagy(65 - 312)<div><a data-role='button' class='resultZoomButton ui-btn ui-btn-icon-notext ui-icon-search ui-mini ui-corner-all ui-btn-right'></a></div ></h5><p class='attribution'>Year</p ><p class='value' style='white-space:pre-wrap'>1997</p><p class='attribution'>Path</p></div>").enhanceWithin();
    });
    
    $('#resultList').on('click','a.resultZoomButton',function(e){
        alert(e.type + 'event fired!')
    });
});