Question

我正在编写一个基于JqueryMobile和jquery的Web应用程序。我的index.html中有三个数据页面。我在第一页的数据页面的pageshow事件中调用web api并填充列表视图。然后通过点击该列表获取该列表项的ID并移动到下一页并再次调用web api以获取页面显示事件中该列表项的详细信息。然后我再次从详细页面移动到第3页再调用另一个api。一切正常，但是当我回到详细页面然后从详细页面到索引页面时，问题就出现了。在移回页面显示页面事件再次调用，它再次在所有页面中调用api。如果我使用oncrete，那么它将只会第一次调用api。任何人都可以告诉我如何在这种结构中调用api。

Answer 1

看看这个小提琴：

http://jsfiddle.net/ezanker/tAB7x/

有多种方法可以解决您的问题，这只是其中之一......

我已将网络api用于填写＆＃39; pageinit＆＃39;中的初始列表。第一页。加载页面时，这将只运行一个。如果您需要刷新此列表，则可以添加刷新按钮。列表中的每个附加项链接到page2，其中包含包含项ID的查询字符串。然后添加listview项的单击处理程序以获取所单击项的id并从web api填写详细信息表单（第2页）（在示例中，我只是将id写入第2页的文本框）。 / p>

$('#page1').on('pageinit', function () {

    //get list from web api (hardcoded for this example
    var $ul = $("#dynamicList");
    $ul.append('<li><a href="#page2?id=1" class="detailLink">A</a></li>');
    $ul.append('<li><a href="#page2?id=2" class="detailLink">B</a></li>');
    $ul.append('<li><a href="#page2?id=3" class="detailLink">C</a></li>');
    $ul.listview("refresh");

    $('.detailLink').on('click', function () {
      var l = $(this).attr("href");
      l = l.substring(l.indexOf('?') + 1);
      var id = getUrlVars(l);
      $('#detalText').val(id['id']);
    });
});

Page2有一个链接到第3页的按钮和一个点击处理程序，它从web api中填充第3页（在示例中我只是将id写入第3页的文本框）：

$('#linkPage2').on('click', function () {
    var id = $('#detalText').val();
    $('#detalText2').val(id);
});

当您单击任一页面上的后退按钮时，不会运行任何代码并保持页面的先前状态。

在jquery的pageshow事件中调用web api

1 个答案:

看看这个小提琴：