JQuery Mobile dynamic popup menu via handlebars

[OAFC_Rob]

Hi I'm havaing a problem with some JQM what is suppose to be happening, when the page is shown a list of data is to be shown. When you click one of the list items the popup needs to dynamically update with the text from the clicked list to display in the pop.

 

i.e. if the item clicked is called Sales then the pop up item should be Edit Sales

 

Here is the code I have

$('#listPage').live('pagebeforeshow', function (event) {
    
    retrieveDisplayList(db, '', function (data) {
        
        tf.ui.hideLoadingMsg();
        var template = Handlebars.templates.dataList(data);
        $("#listContainer").html(template);
        $('#listContainer').trigger('create');
        
        var menuTarget = event.currentTarget;
        
        $('.listItem').click(function() {

            var txt      = $.trim($(this).text());
            var txtLabel = txt;

            var links = new Array();
            
            links.push({
                id: 'ID-1',
                page: '/index.html',
                name: 'Edit ' + txtLabel
            });
  
            links.push({
                id: 'ID-2',
                page: '/index.html',
                name: 'View Data'
            });
            
            var popup = Handlebars.templates.popup({links: links});
            $("#surveyPopup").html(popup);
            $('#surveyPopup').trigger('create');
            $("#popup").popup('open', {positionTo: menuTarget});
            //$('#surveyPopup').trigger('update');

            
        });
        
    });
    
});

[OAFC_Rob]

Solved it, I needed to completely remove the popup from the DOM when it has been closed!!

$('#listPage').on("popupafterclose", ".ui-popup", function() {
    $(this).remove();
});