More Reading:

  • permanent-lovely

  • permission-prevention

  • persuade-cloth

  • photograph-abroad

  • pile-steel

  • pin-companion

  • pink-expensive

  • pipe-bold

  • pity-pin

  • plaster-arch-friendship

  • jQuery Mobile Dynamic List Item and Popup | John Chacko

    Below is an example of adding an item to listview dynamically along with a popup to show on click of icon.

    $(document).on('pageshow', '#home', [], function () {
        $("#addLiPopup").one("click", function () {
            $(this).hide();
            injectLiAndPopup();
        });
    });
    
    function injectLiAndPopup() {
        var _UL = $.mobile.activePage.find(":jqmData(role=listview)");
        var _LI = '<li><a><img class="rotate" src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-mg.jpg"> <h1>Congratulations</h1> <p> MGMT </p> </a><a href="#congratulations" data-rel="popup" data-transition="flip">Details</a></li>';
        _UL.append(_LI).listview("refresh");
        var _POPUP = '<div data-role="popup" id="congratulations" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;"> <img src="http://jquerymobile.com/demos/1.2.0/docs/lists/images/album-mg.jpg"> </div>';
        $.mobile.activePage.find(":jqmData(role=content)").append(_POPUP).trigger("create");
    }

    A Demo can be seen here

     

    Also refer: http://jquerymobile.com/demos/1.2.0/docs/lists/lists-thumbnails.html