Question

我在

简化了这个问题

SIMPLIFIED: jqtouch mobile app ajax loading issue

但是我要离开这篇文章了解详情。感谢。

我有一个RSS阅读器应用程序，我用作学习的游乐场。目前的化身是学习jqtouch /移动应用程序的东西。我在动态加载帖子时遇到问题，因为jqtouch接管了'a'并用它做了一些事情。

以下是一般过程：

- Page loads general html (this is very basic, a couple of empty divs 
  between the body tags) and a link to the reader
- when the document is ready, the first thing that fires is
  an ajax call that gets a list of the blogs I'm following that
  have unread posts and appends it to the proper divs
- when I click the link to the reader, all the blog titles are there
- I click a blog title and it is to load all of the unread posts

问题是，jqtouch＆amp; iui似乎都强迫你在页面/卡片之间使用“a”标签，我想在需要时动态加载博客文章以获得速度（最终我将实现清单和localStorage）。对于我想要做的事情，我用JSON加载它很重要。我想尽可能快速有效地做到这一点。我更喜欢将一个点击绑定到一个div而不是一个“a”，这样我就可以通过点击跳转到新的页面/卡片来进行更多操作。

这是HTML部分：

<body>
<div id="home">
<h1>TERSE</h1>
<ul>
    <li><a href="#feeds">teRSSe</a></li>
</ul>
</div>
<div id="feeds">
Loading, please wait ... 
</div>
</body>

以下是页面加载时触发的内容：

$(document).ready(function()
{
// onload
$.ajax({
    type:   'GET',
    url:    '/ajax/feeds',
    dataType: 'json',
    success: function(data)
    {   
        append_feeds(data);
    },  
    async: true 
}); 
    // ...

这是添加Feed标题的功能：

function append_feeds(data)
{
var feeds = '';
    // loop 1, add the links that will be shown in the main feeds block
for ( i=0; i<data.length; i++ )
{
    var this_data = data[i];     
    if ( this_data.unread == 0 )
    {
        continue;
    }

    feeds = feeds+'<li title="'+this_data.title+'" class="feed-list" id="'+this_data.id+'">\n'; 
    feeds = feeds+ '<a id="'+this_data.hid+'" href="#feed-'+this_data.id+'">'+this_data.title+' &nbsp; ('+this_data.unread+' unread)</a>\n';
    feeds = feeds+'</li>\n';
}

$('#feeds').html('<div id="toolbar">\n<h1>RSS</h1>\n<a class="button back" href="#">Back</a>\n</div>\n<ul title="RSS" id="feedul">\n'+feeds+'</ul>\n');

    // loop 2; 2nd time around to create pages/cards for each blog
    // this is where the individual posts will load when the blog
    // title is clicked
for ( i=0; i<data.length; i++ )
{
    var this_data = data[i];     
    if ( this_data.unread == 0 )
    {
        continue;
    }

    var A = '<div id="feed-'+this_data.id+'">\n';
    A = A + ' <h1>'+this_data.title+'</h1>\n';
    A = A + ' <ul id="'+this_data.hid+'" title="'+this_data.title+'">\n';
    A = A + '  <li id="load-'+this_data.id+'" class="load">loading '+this_data.title+' ...</li>\n';
    A = A + ' </ul>\n';
    A = A + '</div>\n';
    $('body').append(A);
}
}

到现在为止，我们已经有了基本的html，并且append_feeds（）已经填充了一堆divs / uls和我所关注的博客的标题+ num_unread。另外，我已经设置了其他div作为链接的目标，每个博客一个。这些是“页面”或“卡片”。

但是，当我点击博客的标题时，我想首先使用ajax / json获取单个博客的所有帖子，然后更新正确的feed的div，并加载页面/卡（基本上是jqtouch和iui拉出与href =“”中哈希值匹配的div。

我已尝试将bind / live绑定到点击/点击事件，但jqt / iui似乎接管了这个电话。我会完全跳过“a”标签并将点击绑定到“li.post”或其他东西，但jqtouch不会将其识别为点击。它似乎只是想让我使用实际链接作为点击事件。

Answer 1

我刚刚完成了您的工作。您需要将该XML转换为JSON对象，编号为[0]，[1]等。

这个JQuery插件有效且摇滚：http://www.fyneworks.com/jquery/xml-to-json/ 将JS添加到您的应用程序中。然后，您的解析XML函数将所需的XML节点（如通道中的项节点）转换为JSON对象，然后对项进行编号。

那么看看我如何清空当前的项目列表，构建项目列表并将自定义CLICK函数添加到列表项目中，并使用“sun”类（我喜欢jquery）。该函数然后将它的父节点标题和desc添加到需要它的div。 href会将它推送到新的jqtouch DIV，它将处理所有细节信息。很酷'呃？如果有效，请投票给我。它对我来说就像一个魅力。

<ul id="feedlist"></ul>    
<div id="titleDiv"></div>    
<div id="descDiv"></div>

    function parseXml(xml)
    { 
      $('#feedList').html('');
      var rss = $.xml2json(xml); 
      $.each(rss.channel.item, function(i, item)
        { 
        $('#feedList').empty().append('<li class=sun'+i><a href=#contentDiv>'+item.title+'</a></li>'); 
        $('.sun'+i).click(function() {
          $('#titleDiv').empty().append(item.title);                
          $('#descDiv').empty().append(item.description);   
          }); 
       }); 
    };

jqtouch移动应用程序ajax加载问题

1 个答案: