Jquery Mobile Listview Clicked Item - 将参数传递给另一页

Question

我有一个index.html页面。此页面还包含很多像#home，#list #contacts等页面。

#list部分我动态地从我的网页获取数据并生成listview。我想，当用户单击任何列表项的，重定向到#imageDetail页面并传递图像URL页面，并显示图像

这里是#imageDetail页部分

<div data-role="page" id="detailedIMAGE" data-theme="a"> 
     <div data-role="header" data-theme="b" data-position="fixed"> 
     <h1>Image Detail</h1> 
     </div> 
      <div data-role="content">  
      <img id="imageDetayURL" name="imageDetayURL" src="glyphish-icons/158-wrench-2.png"/> 
      <input type="text" disabled="disabled" id="brewername" name="brewername" /> 
      </div> 
     </div> 
    </div> 

而下面的代码是我的javascript代码动态获取json数据。

<script> 
    $('#last5').live("click", function() { 
     $.ajax({ 
      url: "http://mysqlservice.com/getdata.json", 
      dataType: 'jsonp', 
      success: function(json_results){ 
       $("#imageListDetay").html(''); 
       console.log(json_results); 
       $('#imageListDetay').append('<ul data-role="listview" id="tweetul" data-theme="c"></ul>'); 
       listItems = $('#imageListDetay').find('ul'); 
       $.each(json_results.results, function(key) { 
        html = '<h3>'+json_results.results[key].screen_name+'</h3><span id="detailed_image">'+json_results.results[key].resim_url+'</span><img WIDTH=200 HEIGHT=100 src="http://mywebpage.org/upload/'+json_results.results[key].resim_url+'" /><p class="ui-li-bside"><img WIDTH=8 HEIGHT=13 src="images/07-map-marker.png"/> '+json_results.results[key].adres_data+'</p>'; 
        listItems.append('<li><a name="imageDetayGoster" href="#detailedIMAGE">'+html+'</a></li>'); 
       }); 
       $('#imageListDetay ul').listview(); 
      }, 
       error: function (XMLHttpRequest, textStatus, errorThrown) { 
       //error 
      } 
     }); 
    }) 


    $("#detailedIMAGE").live("pagebeforeshow", function (e, data) { 
     var brewername = $('#detailed_image',data.prevPage).text(); 
     $('#brewername').val(brewername); 
     $('#imageDetayURL').attr('src', 'http://mobil.harmankaya.org/'+brewername); 
     alert(brewername); 
    }); 
    </script> 

问题是页面更改后alert(brewername)火灾。但列出所有图像在列表视图中列出的网址不是我选择的。

我该如何解决这个问题

在此先感谢。

Answer 1

JQM文件：

• http://jquerymobile.com/test/docs/pages/page-dynamic.html

这只是引用了文档，但如果你读的页面应该给你如何做到这一点的想法。

应用程序使用与包含散列告诉 应用什么类别的项目，以显示网址链接：

<h2>Select a Category Below:</h2> 
<ul data-role="listview" data-inset="true"> 
    <li><a href="#category-items?category=animals">Animals</a></li> 
    <li><a href="#category-items?category=colors">Colors</a></li> 
    <li><a href="#category-items?category=vehicles">Vehicles</a></li> 
</ul> 

Answer 2

好了，这是我的路，而且运作非常良好。

HTML

<div data-role="page" id="myPage"> 
<div data-role="content" id="myContent"> 
    <ul data-role="listview" data-inset="true/false/whatever" id="myList"></ul> 
</div> 
</div> 

的Javascript

$("#myPage").live("pageshow",function(event){ 
     // get your id from LINK and parse it to a variable 
    var json_list_callback = getUrlVars()[id]; 

     // verify the URL id 
    if (json_list_callback === '') {json_list_callback === ''} //or what value you want 

     // define your path to JSON file generated by the ID declared upper 
    var json_URL = 'http://your.path.to.json.file.php.json?id=' + json_list_callback; 

     // get the JSON data defined earlier and append to your LIST 
    $.getJSON(json_URL,function(data){ 
     var entries = data; 
     //populate our list with our json data 
     $.each(entries,function(index,entry){ 
       // i use dummy data here, you can have whatever you want in youre json 
      $("#myList").append(
       '<li>' + 
         // remember that this "page.html?id=' + entry.json_id + '" will be the link where getUrlVars will get the id declared earlier in function 
        '<a href="page.html?id=' + entry.json_id + '">' + entry.json_title + '<\/a>' + 
       '<\/li>' 
      ); 
     }); 
      //must refresh listview for layout to render 
     $("#myList").listview("refresh"); 
    }); 
}); 
    //this function gets from URL the id, category, whatever you declare like this: getUrlVars()['id'] or getUrlVars()['category'] after last symbol of "?" 
    // you can define your own symbol with this function 
function getUrlVars() { 
var vars = [], 
    hash; 
var hashes = window.location.href.slice(window.location.href.lastIndexOf('?') + 1).split('&'); 
for (var i = 0; i < hashes.length; i++) { 
    hash = hashes[i].split('='); 
    vars.push(hash[0]); 
    vars[hash[0]] = hash[1]; 
} 
return vars; 
} 

这个工作对我来说就像一个魅力，我使用很频繁！

Answer 3

现场活动已被弃用， '在' 使用，

exmple：$（ “＃detailedIMAGE”）上（ “pagebeforeshow” 功能（即数据）{//代码}）;