Jquery mobile 无法在适用于Windows Phone 8的Phonegap应用程序中第二次加载动态html页面

我正在构建一个phonegap应用程序。IIt在iOS和Android上运行良好，但在windowsphone8中，应用程序不会第二次加载页面。我在第一页有一个清单。当我单击每个列表项时，它会在第二页打开其详细信息

第1页的代码如下-

//Each list item belongs to class 'stores-list'
$(document).on("click", '.stores-list', function() {

    if (storage.getDataForKey('storeDetails') != null) {
        storage.clearData('storeDetails');
    }
    storage.setDataForKey('storeDetails', stores[$(this).index()]);
    $.mobile.changePage('store-details.html', {
        transition: 'slide',
       // data: stores[$(this).index()],
    });
});

$(document).on("pagebeforecreate", '#store-details', function () {
    var storeDetailsQuery = storage.getDataForKey('storeDetails');
    displaystoredetailsdata(storeDetailsQuery);
});

function displaystoredetailsdata(data1) {
    var htmlstoredetails = "";
    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Store Name</div><div class="ui-block-b">';
    htmlstoredetails += '' + data1.storeName + '</div></div>';

    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Type</div><div class="ui-block-b">';
    htmlstoredetails += '' + data1.storeType + '</div></div>';

    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Mobile</div><div class="ui-block-b">';
    htmlstoredetails += '<a href="tel:' + data1.mobile + '">' + data1.mobile + '</a></div></div>';

    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Address</div><div class="ui-block-b">';
    htmlstoredetails += '' + data1.address + ', ' + data1.city + ' - ' + data1.pin + '</div></div>';

    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Week Off</div><div class="ui-block-b">';
    htmlstoredetails += '' + data1.weekOff + '</div></div>';

    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Timings</div><div class="ui-block-b">';
    htmlstoredetails += '' + data1.timings + '</div></div>';
    $('#page-store-details-display').html(htmlstoredetails);
}

第2页的代码如下-

//Each list item belongs to class 'stores-list'
$(document).on("click", '.stores-list', function() {

    if (storage.getDataForKey('storeDetails') != null) {
        storage.clearData('storeDetails');
    }
    storage.setDataForKey('storeDetails', stores[$(this).index()]);
    $.mobile.changePage('store-details.html', {
        transition: 'slide',
       // data: stores[$(this).index()],
    });
});

$(document).on("pagebeforecreate", '#store-details', function () {
    var storeDetailsQuery = storage.getDataForKey('storeDetails');
    displaystoredetailsdata(storeDetailsQuery);
});

function displaystoredetailsdata(data1) {
    var htmlstoredetails = "";
    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Store Name</div><div class="ui-block-b">';
    htmlstoredetails += '' + data1.storeName + '</div></div>';

    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Type</div><div class="ui-block-b">';
    htmlstoredetails += '' + data1.storeType + '</div></div>';

    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Mobile</div><div class="ui-block-b">';
    htmlstoredetails += '<a href="tel:' + data1.mobile + '">' + data1.mobile + '</a></div></div>';

    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Address</div><div class="ui-block-b">';
    htmlstoredetails += '' + data1.address + ', ' + data1.city + ' - ' + data1.pin + '</div></div>';

    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Week Off</div><div class="ui-block-b">';
    htmlstoredetails += '' + data1.weekOff + '</div></div>';

    htmlstoredetails += '<div class="ui-grid-a"><div class="ui-block-a">Timings</div><div class="ui-block-b">';
    htmlstoredetails += '' + data1.timings + '</div></div>';
    $('#page-store-details-display').html(htmlstoredetails);
}

$（document）.on（“pagebeforecreate”上的“#存储详细信息”函数（）{
var storeDetailsQuery=storage.getDataForKey（'storeDetails'）；
显示StoreDetailsData（storeDetailsQuery）；
});
函数显示StoreDetailsData（数据1）{
var htmlstoredetails=“”；
htmlstoredetails+=‘门店名称’；
htmlstoredetails+=''+data1.storeName+''；
htmlstoredetails+=‘类型’；
htmlstoredetails+=''+data1.storeType+''；
htmlstoredetails+=“移动设备”；
htmlstoredetails+=''；
htmlstoredetails+='地址'；
htmlstoredetails+=''+data1.address+'，'+data1.city+'-'+data1.pin+''；
htmlstoredetails+=“休息一周”；
htmlstoredetails+=''+data1.weekOff+''；
htmlstoredetails+=‘计时’；
htmlstoredetails+=''+data1.Timeings+''；
$（“#页面存储详细信息显示”）.html（htmlstoredetails）；
}

我面临的问题是，当我单击列表项时，它会打开下一页并显示详细信息。但当我第二次单击任何列表项时，它会重定向到其他页面，甚至创建正确的动态html，但由于我无法获取的任何原因，页面不会显示。（我还尝试触发“pageshow”事件。它是第一次执行。但当我第二次单击任何列表项时没有触发。）

---

请帮忙。提前谢谢。

我已经找到了问题的答案。实际上，在清除localStorage时，它引发了意外的事件处理。因此，我没有清除存储，而是简单地更新了key的值。

$.mobile.changePage使用jQuery mobile AJAX功能，这仅在SPA（单页应用程序）设计中才会出现，您使用的是多页应用程序，因此您需要使用window.location.href=“store details.html”。感谢您的回复。但是，这也无济于事。我正在用同样的方法处理我的其他页面。那里工作得很好。如果问题是由于$.mobile.changePage（）引起的，则它不会触发“pagebeforecreate”事件。