Блог

Новичок здесь. Я пытаюсь создать небольшую программу, которая в основном просто показывает вложенный список и имеет кнопку в конце, которая должна ссылаться на другую страницу. На этой другой странице должен был быть сделан вывод перед добавлением чего-либо. Этот список является, например, списком отелей, и в деталях одного отеля будет кнопка. Эта кнопка переводит вас на другую страницу, к которой адрес был добавлен ранее, чтобы иметь простой способ показать водителю такси. Я пытаюсь много дней, но почему-то не могу заставить это работать.

Вот мой код в 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 для создания списка. все это отлично работает. Затем я хотел бы использовать одну из прочитанных мной вещей (адрес) для динамического добавления в div с идентификатором #taxitaxi. Здесь (очень беспорядочный) код:

 $(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 была бы наиболее удобной.

Пожалуйста, помогите

заранее большое спасибо!

ХОРОШО — пара мыслей: В качестве дополнительного примечания ознакомьтесь с jTemplates для подготовки HTML-кода для списка

После создания списка используйте jQuery для добавления функции onclick:

так что измените свой код на это:

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

и запустите это после создания списка:

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

});