点击动态链接时填充jQuery Mobile页面内容

Question

我对jQuery Mobile和AJAX请求很陌生。我会尽力让自己清楚。

我正在开发一个移动项目，我正在使用jQuery Mobile自动完成列表，并用一个XML文件填充它（因为现在对于MySQL数据库来说这太复杂了）。

我已经成功地拉动了自动完成列表，充满了数据从我的外部XML文件（lista.xml），使用此代码：

<script> 
$(function(){ 

$.ajax({ 
type: "GET", 
url: "lista.xml", 
dataType: "xml", 
success: function(xml) { 

    $(xml).find("anuro").each(function(){ 

    Cientifico = $(this).find("n_cientifico").text(); 
    Comun = $(this).find("n_comun").text(); 
    Foto = $(this).find("foto").text(); 
    Familia = $(this).find("familia").text(); 
    SubFamilia = $(this).find("subfamilia").text(); 

    $("#lista").append('<li><a href="#resultados" data-transition="slide"><img src="img/'+Foto+'"><h2>' + Cientifico + '</h2><p><b>Familia:</b> <i>'+Familia+'</i> | <b>Subfamilia:</b> <i>'+SubFamilia+'</i></p></a></li>'); 
    }); 
    $("#lista").listview("refresh"); 
} 
}); 
}); 
</script> 

这是内容部分的代码我的页面：

<ul id="lista" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Buscar..." data-inset="true"> 
</ul> 

现在工作正常。它加载我XML文件中的所有数据，显示anuro（青蛙）和家人的正确图片，以及所有数据。我的问题是： 如何找出列表中的哪个选项被点击，并使用来自同一XML文件的正确数据填充另一页<div>？ 网络应用程序的想法是，作为用户，您可以通过科学名称或物种家族搜索anuro（青蛙），并且当您单击它时，该页面会显示有关该物种的更多信息。

再如，我会贴的什么我要完成的样本，充满样本数据：

<!-- PAGINA RESULTADO --> 
    <div data-role="page" id="resultados"> 
     <div data-role="header" data-position="fixed"> 
     <h1>eFrogs</h1> 
     <a data-rel="back" data-icon="back" class="ui-btn ui-icon-carat-l ui-btn-icon-notext ui-corner-all">volver</a> 
    </div> 

    <div role="main" class="ui-content"> 

     <!-- TITULO --> 
     <h3><center><i>Phyllomedusa Sauvagii</i></center></h3> 

     <!-- FOTO --> 
     <a href="#foto" data-rel="popup" data-position-to="window" data-transition="pop"> 
     <img class="popphoto" style="margin-right:10px" src="img/phyllomedusa_sauvagii.jpg" alt="Phyllomedusa Sauvagii" width="100%"></a> 
     <div data-role="popup" id="foto" data-overlay-theme="b" data-theme="b" data-corners="false"> 
     <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right"> 
     Cerrar 
     </a> 
     <img class="popphoto" src="img/phyllomedusa_sauvagii.jpg" style="max-height:512px;" alt="Phyllomedusa Sauvagii"> 
     </div> 

    <br><br> 

     <!-- GRILLA DE DATOS --> 
      <div class="ui-grid-a"> 
       <div class="ui-block-a"> 
        <div class="ui-bar ui-bar-a" style="text-align: right;"> 
        Nombre Común 
        </div> 
       </div> 
       <div class="ui-block-b"> 
        <div class="ui-bar"> 
        Rana Mono 
        </div> 
       </div> 
       <div class="ui-block-a"> 
        <div class="ui-bar ui-bar-a" style="text-align: right;"> 
        Familia 
        </div> 
       </div> 
       <div class="ui-block-b"> 
        <div class="ui-bar"> 
        Hyllidae 
        </div> 
       </div> 
       <div class="ui-block-a"> 
        <div class="ui-bar ui-bar-a" style="text-align: right;"> 
        SubFamilia 
        </div> 
       </div> 
       <div class="ui-block-b"> 
        <div class="ui-bar"> 
        Phyllomedusinae 
        </div> 
       </div> 
       <div class="ui-block-a"> 
        <div class="ui-bar ui-bar-a" style="text-align: right;"> 
        Estado de Conservación 
        </div> 
       </div> 
       <div class="ui-block-b"> 
        <div class="ui-bar"> 
        Least Concern 
        </div> 
       </div> 
      </div> 

     <!-- DATOS EXTRA --> 
     <h4 class="ui-bar ui-bar-a">Distribución Geográfica</h4> 
      <div class="ui-body"> 
       <p>Chacoan region of eastern Bolivia, northern Paraguay, Mato Grosso do Sul (Brazil), and northern Argentina.</p> 
       <p>Up to 1500 m</p> 
      </div> 
     <h4 class="ui-bar ui-bar-a">Hábitat y Ecología</h4> 
      <div class="ui-body"> 
       <p>It occurs in the dry Chaco and is an arboreal species. It occurs on vegetation near temporary lagoons or ponds and the males call at night. They make a coarse leaf nest, filled with their glutinous egg-clutches which hangs over the water, the hatched tadpoles then drop in to the water below where they develop. It breeds only in the rainy season and is not tolerant of substantial habitat disturbance.</p> 
      </div> 

    </div><!-- /content --> 

    <!-- PIE DE PAGINA --> 
    <div data-role="footer" data-position="fixed"> 
     <h4>Webapp en Construcción</h4> 
    </div> 
</div> 

它上面的页面充满了样本数据。这个想法是，当你选择一个选项时，数据用正确的一个更新。 我希望你能理解这一切。谢谢你的帮助！

Answer 1

我不知道如果我明白了一切，但你可以听你的列表项目的“click”事件：

$('li').on('click', function() { 
    $.mobile.changePage("#phyllomedusa_sauvagii"); 
}); 

编辑：

当你生成一个项目您的列表，你可以给它一个id伊斯利retrive它：

<li id="anuro">...</li> 

那么你可以添加事件侦听器：

$('#anuro').on('click', function() { 
    $.mobile.changePage("#phyllomedusa_sauvagii"); 
}); 

在你的情况下，代码看起来是这样的：

var item = ('<li id="aruno"><img src="img/'+Foto+'"><h2>' + Cientifico + '</h2><p><b>Familia:</b> <i>'+Familia+'</i> | <b>Subfamilia:</b> <i>'+SubFamilia+'</i></p></li>'); 
$('#lista').append(item); 

item.on('click', function() { 
    $.mobile.changePage("#phyllomedusa_sauvagii"); 
}); 

$("#lista").listview("refresh"); 

编辑2：

一旦你开始了解jQuery的，一切都变得容易。 下面我编辑的上面创建替换你的页面照片中的部分代码：

item.on('click', function() { 
    $('.popphoto').attr('src', 'img/'+Foto); 
});