Jquery Mobile - 将变量的输出附加到另一个html页面中的另一个div

时间:2011-05-20 10:46:14

标签: jquery xml mobile append

这里的菜鸟。我试图创建一个小程序,基本上只显示一个嵌套列表,并在最后有一个按钮,应该链接到另一个页面。在那个其他页面上,应该先添加一些输出来附加某些内容。该列表例如是酒店列表,并且在一个酒店的细节内将是按钮。该按钮将您带到之前已附加地址的其他页面,以便以简单的方式显示出租车司机。我尝试了很多天,但不知怎么能让它发挥作用。

这里我的代码在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>

那部分应该没问题。她现在是我的文档就绪功能。我正在从xml中读取内容以创建列表。一切都很好。然后我想使用我读出的一个东西(地址)动态地附加到id为#taxitaxi的div。这里(非常凌乱)代码:

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



  });
}

我也试过以某种方式使它成为一个onclick函数,我把它放入尝试并显示警报。试图使它成为真实的东西虽然没有成功。虽然我认为onclick功能最有用。

请帮忙

提前多多感谢!

1 个答案:

答案 0 :(得分:0)

好的 - 有几点想法:  作为旁注,请查看jTemplates准备列表的html

创建列表后,使用jQuery附加onclick函数:

所以修改你的代码:

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

并在创建列表后运行:

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

});