如何使用jQuery的移动列表视图链接到UrlVars的内部页面？ [英] how to use jquery-mobile listview to link to inner pages with UrlVars?

问题描述

我将一些内部页面（＃page1，＃page2，..）放到同一个html文件中。
例如在＃page2中，我有一个jQuery的listview对象：

 < ul id =itemListdata-role =listview >< / UL> 
  

listview中的每一项都有一个URL，它是内部页面加上js文件中生成的索引成HTML文件的HEAD。一些代码放入js文件中：

$ $ $ $ $ $ $ $ $ each（data，function（index，record）{
$ （'#itemList'）。append（'< li>< a href =＃page2？id ='+ record.id +'>< / a>< / li>）;
}）;
$（'＃itemList'）。listview（'refresh'）;

鼠标悬停在项目上显示与每个索引id的不同链接。但只有第一次点击才能发挥作用并进入正确的页面，例如page2？id = id1
用列表视图返回到页面并点击另一个项目，例如/ page2？id = id2，显示的页面是带有id1的前一个（第一个链接点击）页面

这可能是UrlVars表示法的问题？当我使用href =page.html？id = ....或href =＃页面没有额外的索引时，没有问题，listview工作正常。但有href =＃page？id = ... dosen't work。听起来像是一个刷新问题？可能与DOM有关？

有什么想法吗？ p>

对不起，我不知道我是否正确解释了问题。

谢谢！
Best Regards。

解决方案

请尝试以下操作：

<$ p $ （数据，函数（索引，记录）{
$（'＃itemList'）。append（'< li> id< a href =＃page2？id ='+ record.id +'>'+ record.id +'< / a>< / li>'）;
}）;

您不必重复代码，因为您已经在每个函数中循环了相同的内容。

I have a problem with jquery-mobile listview.

I some inner pages (#page1, #page2,..) into the same html file. e.g. in #page2, I have a jquery listview object:

<ul id="itemList" data-role="listview"></ul>  

Each item of the listview has a URL that is the inner page plus an index generated in a js file into a HEAD of html file. Some of code into the js file:

$.each(data, function(index, record) {
$('#itemList').append('<li><a href="#page2?id=' +  record.id + '"></a></li>');
});
$('#itemList').listview('refresh');

The mouse over items shows differents links with each index "id". But only the first click works and goes to the correct page e.g. page2?id=id1 Returning to the page with the listview and clicking over another item e.g. /page2?id=id2, the page displayed is the previous (the first link clicked) page with id1

It could be a problem of the UrlVars notation? When I used href="page.html?id=.... or href="#page without additional indexes there is no problem and listview works fine. But with href="#page?id=... dosen't work. Sound like a refresh problem? Maybe related with the DOM?

Any idea?

I'm Sorry, I do not know if I have explained the problem correctly.

Thank you! Best Regards.

解决方案

Try the following:

$.each(data, function(index, record) {
    $('#itemList').append('<li><a href="#page2?id=' +  record.id + '">' + record.id + '</a></li>');
});

You don't have to repeat code since you are already looping over that same piece inside the each function.

这篇关于如何使用jQuery的移动列表视图链接到UrlVars的内部页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！