Question

刚刚进入一些工作项目的Jquery手机，我遇到了一个小绊脚石，我已经开了一段时间，所以是时候进行同行评审了。

概念是这样的：有一个带有“最近的facebook条目”按钮的主页面。单击时，该按钮将您带到第二页，其中结果从facebook rss提取中提取并包装在指向同一页面上的书签的标记中（符合JQM约定）。到目前为止，我没有问题，链接正确填充标题，并且href正确指向href =“detailpage”+ i。问题是当我尝试制作相应的内容容器并将其附加到带有匹配的detailpage + i id的body标签时，链接只会将我带回主页而不是新添加的内容。

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

我正在使用JQM 1.0b2和jquery 1.6.2 with 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

编辑：经过几个小时的旋转我的车轮和改变我的方法后，似乎我找到了解决方案。而不是像最初加载的所有其他链接一样使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我会在有空的时候检查并更新我的答案。

Jquery移动和动态链接

1 个答案: