0

我对 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 格式的外观 Here's Image

第二次访问 此图像显示了当我返回页面时 css 格式的外观（如它所假设的那样） 这是图像

4

0 回答 0