Jquery Mobile - append output of variable to another div within another html page

A noob here. Im trying to create a small program that basically just shows a nested list and has a button at the end which should link 开发者_开发知识库to another page. On that other page an output before to append something should have been made. This list is for example a list of hotels and within the details of one hotel will be a button. That button brings you to the other page where the address has been appended to before to have a simple way to show the taxi driver. Im trying for many days but somehow cant get it work.

Here my code within the 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>

That part should be fine. Her now my document-ready function. Im reading stuff in from an xml to create the list. that all works great. Then i would like to use one of the things i read out (the address) to be dynamically appended to the div with the id #taxitaxi. Here the (very messy) 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");



  });
}

I tried as well to make it somehow an onclick function, which i put one in to try and it shows the alert. Trying to make it the real thing though didnt succeed. Though i think an onclick function would be most usable.

Please help

many thanks in advance!

OK - a couple of thoughts: As a sidenote check out jTemplates for preparing the html for the list

Once you have created the list use jQuery to append the onclick function:

so modify your code to this:

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

and run this after the list has been created:

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

});