如何将变量插入jqm pageshow函数

Question

我不确定这是否可行，但我想知道如何将页面 id 传递给 pageshow 函数，如下所示。我怀疑这是错误的方法，但答案暗示了我。通过此示例传递 page 并在 pageshow 中附加页面 ID - 获取对应的 #qanda_entry_1 或 #qanda_entry_2 等到一个文档中的一系列页面。

更新：来自 DGS 的代码如下

页面转换正在发生，但页面没有更新或呈现。我的数据来自全局变量“articles_data”。我看不到点击函数中'article'的值如何传递到新页面？警报“警报（文章）；”没有在 pageshow 上被触发。

另外 - 这是一个多页文档。

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

});

});

我的listview链接结构是动态生成的

<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

使用类似于下面的代码。这将为您提供触发 pageshow 事件的元素的 ID

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

    });

});

这将概括您的 pageshow 处理程序，而无需动态设置它。我有点担心您的 html，因为您已经通过 id 引用了两个元素，并且 id 一次只能出现在一个页面上。