How to insert variable into jqm pageshow function

Question

I'm not sure if this is possible but I'm wondering how I can pass a page id to a pageshow function as below. I suspect this is the wrong way to go but the answer has alluded me. With this example passing page and appending the page id in pageshow - get #qanda_entry_1 or #qanda_entry_2 etc which correspond to a series of pages in one document.

UPDATED: code as per below from DGS

The page transition is taking place but there is no update or rendering of the page. My data comes from a global variable 'articles_data'. I can't see how the value of 'article' in the click function can be passed to the new page? The alert 'alert(article);' is not being fired on pageshow.

Additionally - this is for a multipage document.

$(document).on("click",".articleLink",function () {
$(this).addClass('clicked_button');  
var page = $(this).attr('data-page');
var article = $(this).attr('data-id');
//alert(article);
$.mobile.changePage(page, {
transition: 'slide',
});
});

$('div[data-role="page"]').on('pageshow',function(){

var page_id = $(this).prop('id');
var article = $('.articleLink.clicked_button').attr('data-id').substr(4);
alert(article);
$('.articleLink.clicked_button').removeClass('clicked_button');

$('#qandahead h1').empty();
$('#qanda_text div').empty();
jQuery.map(articles_data, function(obj) {
   if(obj.id === article){
      $('#qandahead').html('<h1>'+ obj.title + '</h1>');
      $('#qanda_text').html('<h2>'+ obj.title + '</h2>' +
         '<p>' + obj.introtext + '</p>');
   } 

});

});

My listview link structure is generated dynamically

<li><a class="articleLink ui-link-inherit"  data-page="#qanda_entry_0" data-id="art_18"></li>
<li><a class="articleLink ui-link-inherit"  data-page="#qanda_entry_1" data-id="art_9"></li>

etc

Answer 1

Use code similar to below. This will give you the id of the element that fired the pageshow event

$('div[data-role="page"]').on('pageshow',function(){
    var page_id = $(this).prop('id');
});

Change your code to

$(document).on("click",".articleLink",function () {
    $(this).addClass('clicked_button');  
    var page = $(this).attr('data-page');
    $.mobile.changePage(page);
});

$('div[data-role="page"]').on('pageshow',function(){
    var page_id = $(this).prop('id');
    var article = $('.articleLink.clicked_button').attr('data-id').substr(4);
    $('.articleLink.clicked_button').removeClass('clicked_button');
    $('#qanda_text div').empty();
    $('#qandahead h1').empty();
    jQuery.map(articles_data, function(obj) {
       if(obj.id === article){
          $('#qandahead').html('<h1>'+ obj.title + '</h1>');
          $('#qanda_text').html('<h2>'+ obj.title + '</h2>' +
             '<p>' + obj.introtext + '</p>');
       } 

    });

});

This will generalize your pageshow handler without needing to set it dynamically. I am a bit worried about your html since you have referenced two elements by id and an id should only appear on one page at a time.