jQuery Mobile 2-page Base Fiddle

by bujar

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js"></script>
<div data-role="page" id="p1"> 
    <div  data-role="header"><h1>Header Page 1</h1></div> 
    
    <div  data-role="content">
<ul data-role="listview" data-inset="true">
    <li><a href="#">
        <img src="../../_assets/img/album-bb.jpg">
        <h2>Broken Bells</h2>
        <p>Broken Bells</p></a>
    </li>
    <li><a href="#">
        <img src="../../_assets/img/album-hc.jpg">
        <h2>Warning</h2>
        <p>Hot Chip</p></a>
    </li>
    <li><a href="#">
        <img src="../../_assets/img/album-p.jpg">
        <h2>Wolfgang Amadeus Phoenix</h2>
        <p>Phoenix</p></a>
    </li>
</ul>
    </div> 
    
    <div  data-role="footer"><h4>Footer</h4></div> 
</div>

JavaScript

$('#p1').on('click', 'a', function(){

    alert(1);
});

$('#p1').on('click', 'img.ui-li-thumb', function(e){
   e.preventDefault();
    e.stopPropagation();
    alert(2);
});

$('[data-role="listview"]').append('<li><a href="#"><img src="../../_assets/img/album-bb.jpg"><h2>Dynamic</h2><p>I am dynamic</p></a></li>');

$('[data-role="listview"]').listview('refresh');