Question

我正在处理动态列表。这是标记和用于显示它的html。

 markup += '<li><a href="#fbfullpostviewpage" id="addPostToLocalStorage" data-rel="dialog" data-transition="pop" data-overlay-theme="e" data-inline="true"><img src="' + thumb_url + '">' +'<h4>' + name + '</h4><p>' +'posted this photo....</p><p>'+likes+'<img src="images/facebook-like-16.png"></p></a></li>';

这是一个循环，所以它为每个列表项做。在循环之后我有一个

$('#newsfeedposts').append(markup);
$('#newsfeedposts').listview("refresh");

但是，当单击列表中的每个项目时，我想将其添加到本地存储。在上面的代码之后，我这样做，

 $('a').bind('click', function(){
         localStorage.setItem("fbclickedPost", JSON.stringify(post));
         console.log(post);
         alert("this post was added to local storage");

        // showDetailedPost(post);
        var retrievedData = localStorage.getItem("fbclickedPost");
        var facebookPost2 = JSON.parse(retrievedData);
         console.log(facebookPost2);

它工作并记录控制数组项，但问题是，无论列表中单击了什么项，它总是只将列表中的最后一项添加到本地存储，但我想添加当前项被点击，到本地存储。

任何帮助都会很棒！我一直在苦苦挣扎。

Answer 1

您可以尝试将点击事件添加到链接元素<a>，然后再将其添加到listview（仅在创建它们之后）：

在您的LOOP中，请执行以下操作：

new_markup = $('<li><a href="#fbfullpostviewpage" id="addPostToLocalStorage" data-rel="dialog" data-transition="pop" data-overlay-theme="e" data-inline="true"><img src="' + thumb_url + '">' +'<h4>' + name + '</h4><p>' +'posted this photo....</p><p>'+likes+'<img src="images/facebook-like-16.png"></p></a></li>');

// Add the click event to the link <a> :
new_markup.children('a').click(function(){
     localStorage.setItem("fbclickedPost", JSON.stringify(post));
     console.log(post);
     alert("this post was added to local storage");

    // showDetailedPost(post);
    var retrievedData = localStorage.getItem("fbclickedPost");
    var facebookPost2 = JSON.parse(retrievedData);
     console.log(facebookPost2);
});

$('#newsfeedposts').append(new_markup);

然后，在你的循环之后，当它结束时，刷新你的listview：

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

让我知道这是否有效。

jquery mobile .listview（）只将最后一项添加到localstorage，而不管单击的项目如何

1 个答案: