JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<div data-role="page">
    <div data-role="content">
        <a data-role="button">Click Me</a>
        <ul id="listview" data-role="listview"><li>This row was here on-load.</li></ul>
    </div>
</div>

<script type="text/javascript"> 
    $("# listview  li").click(function() {
        alert("fuck"); // id of clicked li by directly accessing DOMElement property
    });
    </script>

JavaScript

$('a').bind('click', function () {
    var data = [{"id":1, "start":"2011-10-29T13:15:00.000+10:00", "end":"2011-10-29T14:15:00.000+10:00", "title":"Meeting"}];

    var output = '';
    //iterate through the data using $.each()
    $.each(data, function(index, value){
        //add each value to the output buffer
        output += '<li>' + value.title + ' (Added using $.each())</li>';
    });
    
    //iterate through the data using for()
    for (key in data) {
        output += '<li>' + data[key].title + ' (Added using for())</li>';
    }

    //now append the buffered output to the listview and either refresh the listview or create it (meaning have jQuery Mobile style the list)
    $('#listview').append(output).listview('refresh');//or if the listview has yet to be initialized, use `.trigger('create');` instead of `.listview('refresh');`
});

  $('#listview li').live('click', function() {
        alert("Works"); // id of clicked li by directly accessing DOMElement property
    });