Jquery移动和动态链接

只需进入一个Jquery移动平台进行工作项目，我遇到了一个小问题，我一直在旋转我的车轮一段时间，因此有时间进行同行评审。Jquery移动和动态链接

的概念是这样的：有一个“Facebook最近条目”按钮，主页面。单击时，该按钮即可转到结果从一个网站的RSS Feed中提取，并包裹在一个标签指向一个书签在同一页上（与JQM惯例保持一致），第二页。到目前为止，我没有问题，链接正确填充标题，并且href正确指向href =“detailpage”+ i。问题是，当我试图做出相应的内容容器，并把它添加到具有匹配detailpage +本人身份证body标签的链接只是把我带回到主页，而不是新追加的内容。

我的想法是，也许dom不知道创建后的新东西是否存在，因此，没有匹配的元素，只返回第一个“page”元素。

我使用JQM 1.0b2和jQuery 1.6.2与PhoneGap的

操作我做如下所示：

$('#gotoContentpage').click(function(){ 

    $("#contentlist").empty(); //empty the list elements we've placed in the html 
    $.ajax({ 
      type: "GET", 
      url: "https://www.facebook.com/feeds/page.php?id=212385708771580&format=rss20", 
      dataType: "xml", 
      success: parseXml 
      }); 

    function parseXml(xml){  
     var i =1; 
     $(xml).find("item").each(function(){ 
      var pageid = "detailpage" + i;      
      $("#contentlist").append("<li><a href='#"+pageid+"'>" + ($(this).find("title").text()) + "</a></li>"); 

      $("body").append("<div data-role='page' id='"+pageid+"'><div data-role='header'><a data-rel='back'>back</a><h1>" + ($(this).find("title").text()) + "</h1></div><div data-role='content'>" + ($(this).find("description").text()) +"</div><div data-role='footer'><h1> detail Page Footer </h1></div></div>"); 

      i++; 
      }); 


      $("#contentlist").listview('refresh'); 

     } 


    });

这里是正在为常规的HTML输出HTML页：http://deepblue.cs.camosun.bc.ca/~c0029098/caleb/test.html

编辑：后几个小时纺纱我的车轮andchanging我的做法，似乎我已经找到了解决办法。代替把HREF点像所有的初始加载其他环节的书签我不得不利用$ .mobile.changePage功能得到地方，我需要去。

"<li><a href='javascript:void(0)' onclick=\"javascript: $.mobile.changePage($('"+'#'+pageid+ "'), 'slide');\">" + "foobar"</a></li>"

希望可以帮助别人。

来源

2011-08-04 Ian Hoar

真正有用的帖子，一个小东西，你缺少的“？”关于url后的.php ...次要我知道。 :) – jimbo

很高兴它帮助你。（修复了网址错误，谢谢！） –

我相信，动态添加的页面应该添加data-url属性，以便在导航中启用它。如果我记得正确的话，这是JQM大修后退按钮和历史记录工作时添加的。 ID在导航方面不再有用。

你的情况

即：

$("body").append("<div data-role='page' data-url='"+pageid+"' id='"+pageid+"'><div data-role='header'><a data-rel='back'>back</a><h1>" + ($(this).find("title").text()) + "</h1></div><div data-role='content'>" + ($(this).find("description").text()) +"</div><div data-role='footer'><h1> detail Page Footer </h1></div></div>");

如果还有问题，那么.page()可能需要在动态添加页面被调用。

我添加动态页面的代码如下所示：

$('<div data-role="page" id="infopage" data-url="infopage"></div>').appendTo('body').page();

可能调用.page()的情况下，只是增加了data-url，当我有时间和更新我的回答，我会检查。

来源

2011-10-03 15:13:28 amcc

Jquery移动和动态链接

回答

相关问题