Jquery Mobile - ajouter la sortie de la variable à un autre div dans une autre page html

Question

Un noob ici. Im essayant de créer un petit programme qui montre simplement une liste imbriquée et a un bouton à la fin qui devrait lier à une autre page. Sur cette autre page, une sortie avant d'ajouter quelque chose aurait dû être faite. Cette liste est par exemple une liste d'hôtels et dans les détails d'un hôtel sera un bouton. Ce bouton vous amène à l'autre page où l'adresse a été ajoutée avant pour avoir un moyen simple de montrer le chauffeur de taxi. Im essayant pendant beaucoup de jours mais d'une manière ou d'une autre ne peux pas le faire fonctionner.

Voici mon code dans le code HTML:

<div data-role="page" id="taxi" data-theme="a"> 
<div data-role="header" data-position="fixed"> 
<h1>Taxi instructions</h1> 
</div> 

<div data-role="content"> 
<h3>I would like to go to...</h3> 
<h1 id="taxitaxi"> 
</h1> 

</div> 

<div data-role="footer" data-position="fixed"> 
<h4>address</h4> 
</div> 
</div> 

Cette partie devrait être bien. Son maintenant ma fonction prête pour le document. Im lire des choses à partir d'un fichier XML pour créer la liste. que tout fonctionne bien. Ensuite, je voudrais utiliser l'une des choses que je lis (l'adresse) pour être dynamiquement ajouté à la div avec l'identifiant #taxitaxi. Ici, le (très salissant) Code:

$(document).ready(function() 
{ 
$.ajax({ 
type: "GET", 
    url: "xml/hotels.xml", 
    dataType: "xml", 
    success: manipulateXml 
    }); 
}); 

function popup() { 

alert("Hello World"); 
} 


function manipulateXml(data){ 

$(data).find("hotel").each(function() { 

var hotelname = $(this).find("name").text(); 
var eaddress = $(this).find("eaddress").text(); 
var caddress = $(this).find("caddress").text(); 
var theme = $(this).find("theme").text(); 


    var output = "<li>" + hotelname;  




output += "<ul " + theme; 
output += ">"; 

output += "<br>"; 
output += "<br>"; 
output += "<h2>"; 
output += "Address (english)"; 
output += "</h2>"; 
output += "<li>" + eaddress; 
output += "</li>"; 

output += "<p>"; 
output += "<br>"; 
output += "<h2>"; 
output += "Address (chinese)"; 
output += "</h2>"; 
output += "<li>" + caddress; 
output += "</li>"; 


//show taxi driver 
output += "<a href="; 
output += "#taxi"; 
output += " data-role="; 
output += "button"; 
output += " data-inline=false onclick=", 
output += "popup()"; 
output += ">SHOW TAXI</a>"; 
output += "<br>"; 
output += "<br>"; 
output += "<br>"; 
output += "<br>"; 
output += "<br>"; 
output += "<br>"; 
output += "<br>"; 
output += "<br>"; 
output += "<script>"; 
output += "$('#taxitaxi')"; 
output += ".append(" +caddress; 
output += ")"; 
output += "</script>"; 

output += "</ul>"; 

output += "</li>"; 

    $("#hotellist").append(output); 

$("#hotellist").listview('refresh'); 
$("#hoteldata").listview('refresh'); 

sortUnorderedList("hotellist"); 



    }); 
} 

J'ai essayé aussi bien pour le rendre en quelque sorte une fonction onclick, que je mets un pour essayer et il montre l'alerte. Essayer d'en faire la vraie chose n'a pas réussi. Bien que je pense qu'une fonction onclick serait la plus utilisable.

S'il vous plaît aider

merci beaucoup d'avance!

Answer 1

OK - deux pensées: En sidenote consulter jTemplates pour préparer le code html pour la liste

Une fois que vous avez créé l'utilisation de la liste jQuery pour ajouter la fonction onclick:

donc modifier votre Code à ceci:

var output = "<li class="listItem">" + hotelname; 

et exécuter cette fois que la liste a été créée:

$('.listItem').each(function() { 
    $(this).click(function() { 
    popup(); 
    }); 

});