Как вставить переменную в функцию jqm pageshow

Question

Я не уверен, возможно ли это, но мне интересно, как я могу передать идентификатор страницы в функцию pagehow, как показано ниже. Я подозреваю, что это неправильный путь, но ответ намекал мне. В этом примере прохождение страницы и добавление идентификатора страницы в pageshow - get # qanda_entry_1 или #qanda_entry_2 и т. Д., Которые соответствуют серии страниц в одном документе.

ОБНОВЛЕНО: код согласно DGS ниже

Происходит переход страницы, но нет обновления или рендеринга страницы. Мои данные поступают из глобальной переменной "article_data". Я не вижу, как значение "article" в функции click может быть передано на новую страницу? Оповещение 'alert(article);' не запускается на страницах шоу.

Дополнительно - это для многостраничного документа.

$(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>');
   } 

});

});

Моя структура списка ссылок генерируется динамически

<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>

так далее

Answer 1

Используйте код, подобный приведенному ниже. Это даст вам идентификатор элемента, который запустил событие pagehow

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

Измените свой код на

$(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>');
       } 

    });

});

Это обобщит ваш обработчик страниц, не устанавливая его динамически. Я немного беспокоюсь о вашем html, так как вы указали два элемента по идентификатору, и идентификатор должен появляться только на одной странице за раз.