JavaScript – JQuery Mobile在浏览页面后丢失所有样式

前端之家收集整理的这篇文章主要介绍了JavaScript – JQuery Mobile在浏览页面后丢失所有样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我经历了一个严重的头痛,在过去几个小时,我无法弄清楚为什么当我在各种页面(由ajax动态加载)之间滑动时,所有的样式.

我已经在网上读了几十个帖子,并尝试过.page()触发器(“刷新”)触发器创建等等.

第1页有一个列表,点击该项目,它会获取另一个列表的完整内容并将其放入DOM中.

JQuery版本(移动1.1rc2 – 与1.0.1稳定相同的问题):

<script src="scripts/ajax.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">

链接点击初始列表:

javascript:GetGarageList("G9236")

触发:

// show garages for factor
function GetGarageList(accNo) {
    $.mobile.showPageLoadingMsg("b","Loading",false);
    $.ajax({
        type: "POST",url: "Default.aspx/GetGarageList",data: "{'accNo':'" + accNo + "'}",contentType: "application/json; charset=utf-8",dataType: "json",success: function (msg) {
            $("#garageList").html(msg.d);
            $.mobile.changePage("#garageList");
        },error: function () {
            ShowError("Error :(");
        },complete: function () {
            $.mobile.hidePageLoadingMsg();
        }
    });
};

第一次加载,第二页看起来完美:

但是当我按下按钮顶部时.然后点击另一个链接

javascript:GetGarageList("G9336")

我搞砸了看法:

请帮忙!

编辑:

其他人使用.trigger(“创建”);并说他们解决了这个问题,但每次我把它添加到我的代码如下所示:

$("#garageList").html(msg.d).trigger("create");

要么

$("#garageList").html(msg.d);
$("#garageList").trigger("create");

它只是给我一个加载旋转器永远.

编辑2:

根据Barnes的建议,我已经改变了html:

<%--Garage List--%>
    <div data-role="page" id="garageList" data-add-back-btn="true" data-theme="a">
        <div data-role='header' data-position='fixed'>
            <h1>Garages</h1>
            <a href='index.html' data-icon='plus' data-iconpos='notext' class='ui-btn-right' data-theme='b'></a>
        </div>
        <div data-role='content' id="abc">
            <ul data-role='listview' id='xyz' data-filter='true' data-filter-theme='a' data-filter-placeholder='search name or account no...' data-split-icon='info' data-split-theme='a'>

/// --> new content goes here... as simply many <li> items.

</ul>
        </div> <!-- /content -->
    </div> <!-- /page -->

然后我尝试(在ajax成功):

$("#xyz").empty();
            $("#xyz").html(msg.d);
            $("#abc").listview("refresh");
            $.mobile.changePage("#garageList");

$("#xyz").html(msg.d);
            $("#xyz").listview("refresh");
            $.mobile.changePage("#garageList");

这里是msg.d的一些示例输出

"<li><a href='javascript:GetGarageDetails(16267)'><h3>A KETCHEN MOTOR ENGINEERS</h3><p><strong>MID LOTHIAN</strong></p></a><a href="javascript:GetFactorDetails('16267')"></a></li>

<li><a href='javascript:GetGarageDetails(16328)'><h3>G.A.AUTOS</h3><p><strong></strong></p></a><a href="javascript:GetFactorDetails('16328')"></a></li>

<li><a href='javascript:GetGarageDetails(16262)'><h3>GARRY HENDERSON MOTOR ENGINEERS</h3><p><strong>WEST LIMTON</strong></p></a><a href="javascript:GetFactorDetails('16262')"></a></li>

<li><a href='javascript:GetGarageDetails(16264)'><h3>LEADBURN GARAGE LTD</h3><p><strong>PEELBLESHIRE</strong></p></a><a href="javascript:GetFactorDetails('16264')"></a></li>

<li><a href='javascript:GetGarageDetails(16315)'><h3>LOTHIAN MOTORS</h3><p><strong></strong></p></a><a href="javascript:GetFactorDetails('16315')"></a></li>

"

和其他变化,但它仍然不想玩(微调永远在刷新)…虽然它改进了一点(当我刷新):

解决方法

这已经解决了我所有的问题.
$('...').trigger('create');

你只需要找到正确的元素放入选择器.

对我来说,这些线条做的很棒:

$(document).bind('pagechange',function() {
  $('.ui-page-active .ui-listview').listview('refresh');
  $('.ui-page-active :jqmData(role=content)').trigger('create');
});
原文链接:https://www.f2er.com/jquery/154614.html

猜你在找的jQuery相关文章