Question

我对jquery一起相当新。基本上我所做的是从ajax调用中检索的图像填充动态图库。图像被附加到无序列表，并且应该接收特定于图像库的特殊css格式，其他ul列表不受影响。一切都很好，但是当我查看图库时，图像上没有呈现正确的css格式。我搜索了遍布stackoverflow并尝试了许多类似问题的选项，包括 .listview（'refresh'）; 以及ajax 完成后以及其他一些问题解决方案。什么都行不通。如果我离开页面并返回，则应用格式。以下是我正在使用的以下代码。

链接到图库

$('ul#fieldList').append('<li id="albums"><a href="#Gallery1?" onClick="GetUserPhotos('+value.album_id+'); return false;"><img src="images/1.jpg"><h3>'+value.name+'</h3><p>'+value.description+'</p></a><div class="ui-li-count">'+value.count+' Images</div></li>');

onClick功能

function GetUserPhotos(albumid) {

    console.log("Get User Photos Function Ran");
    var get_user_photos_album_id = albumid;
    var get_user_photos_client_id = window.localStorage.getItem("client_id");
    var get_user_photos_user_id = window.localStorage.getItem("user_id");
    console.log("Assign Variables from local storage");
    var formData = {
        user_id: get_user_photos_user_id,
        client_id: get_user_photos_client_id,
        album_id: get_user_photos_album_id
    }; //Array 

    $.ajax({
        url: "client_photos.php",
        type: "POST",
        data: formData,
        async: "false",
        success: function (data) {
            $("ul#photosList li#photos").remove();
            $("#test1").html('');
            //data - response from server
            var PhotoData = $.parseJSON(data);
            console.log("PhotoData json data parsed");
            $("ul#fieldList li#albums").remove();
            $.each(PhotoData, function (key, value) {
                $('ul#photosList').append('<li id="photos"><a rel="' + value.album + '" href="http://www.myphotoshootapp.com/cms/uploads/' + value.client_id + '/' + value.album + '/' + value.id + '.' + value.ext + '" class="swipebox" title="' + value.fullname + '""><img src="http://www.myphotoshootapp.com/cms/uploads/thumbs/' + value.client_id + '/' + value.album + '/' + value.id + '.' + value.ext + '" alt="' + value.fullname + '" /></a></li>');
            });
            Swipe();
        },
        complete: function () {
            $('#ul#photosList').listview('create');
            $.mobile.changePage("#Gallery1");
        }
    });
}

DIV项目已添加到

<div data-role="content">
  <ul data-role="listview" data-inset="true" id="photosList">
     <li id="title">Photos</li>
     <div class="main" id="test1"><img src="images/ajax-loader.gif" alt="Loading..." /></div>
  </ul>
</div>

和CSS

li#photos { float: left !important; width: 33.33333333% !important; }
li#photos a { display: block !important; margin: 5px !important; border: 1px solid #3c3c3c !important; }
li#photos img { display: block !important; width: 100% !important; height: auto !important; }

正如我所说，我对此很了解，并且在学习的过程中，通过阅读其他许多问题，我学到了很多东西，但这个我无法弄明白。谢谢你的帮助。

第一次访问时，有一些额外的课程，比如ui-btn，ui-btn-icon-right，ui-li-has-arrow，ui-li，ui-li-has-thumb，ui-btn-正在添加up-c，第二次只应用我的普通格式。

首次访问 此图显示了第一页访问时css格式的外观这是Image

第二次访问 此图显示了当我返回页面时css格式的样子（就像它支持的那样）这是Image

在jquery listview ajax中没有css格式

0 个答案: