Jquery 移动和动态链接

Question

刚刚为一个工作项目投入一些 Jquery 移动设备，我遇到了一个小绊脚石，我已经在上面旋转了太长时间了，所以是时候进行同行评审了。

概念是这样的:有一个带有“最近的 Facebook 条目”按钮的主页。单击该按钮后，您将进入第二个页面，其中的结果是从 facebook rss feed 中提取的，并包含在指向同一页面上的书签的标签中(与 JQM 约定保持一致)。到目前为止，我没有问题，链接正确填充了标题，并且 href 正确指向 href="detailpage"+i。问题是，当我尝试制作相应的内容容器并将其 append 到具有匹配的detailpage+i id 的正文标记时，该链接只会带我返回主页，而不是新 append 的内容。

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

我正在使用带有phonegap的JQM 1.0b2和jquery 1.6.2

我正在做的操作如下所示:

$('#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

编辑:经过几个小时的旋转和改变我的方法后，我似乎找到了解决方案。我没有像最初加载的所有其他链接那样将 href 指向书签，而是被迫使用 $.mobile.changePage 函数来获取我需要去的地方。

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

希望对某人有帮助。

Answer 1

我相信，动态添加的页面应该添加 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 我会在有时间时检查并更新我的答案。