单击我的jQuery Mobile项目中的后退按钮时的样式加载问题

时间:2015-07-16 04:54:24

标签: jquery html css jquery-mobile loading

我正在开发一个使用jQuery Mobile的项目。我使用过旋转木马:http://owlgraphic.com/owlcarousel/index.html

$.mobile.changePage("#home",{ transition: "slide"} );

用于导航到主页,

$(document).on("pageshow", "#home", function() {

    var url = 'http://www.example.com/new-products';

    $.ajax({
        type: "get",
        url: url,
        //data: "login=" + login + "&password=" + pass,
        dataType: "json",
        success: function(data) {
            var products = data;


            var content = "";
            $("#owl-example").html(content)
            $.each(products, function(index, product) {


            // Custom Navigation Events
            $(".next").click(function() {
                owl.trigger('owl.next');
            })
            $(".prev").click(function() {
                owl.trigger('owl.prev');
            })
            $(".play").click(function() {
                owl.trigger('owl.play', 1000); //owl.play event accept autoPlay speed as second parameter
            })
            $(".stop").click(function() {
                owl.trigger('owl.stop');
            })
  content += "<div class='products'><div class='img-container'><img width='100' height='100' src=http://www.example.com" + product.image + "></div>" + product.name + "<br><span>" + product.points + "</span></div>";
            });
            $("#owl-example").html(content);

            $.mobile.loading('hide');


            callCaserole();

            // Custom Navigation Events
            $(".next").click(function() {
                owl.trigger('owl.next');
            })
            $(".prev").click(function() {
                owl.trigger('owl.prev');
            })
            $(".play").click(function() {
                owl.trigger('owl.play', 1000); //owl.play event accept autoPlay speed as second parameter
            })
            $(".stop").click(function() {
                owl.trigger('owl.stop');
            })



        },
        error: function(httpReq, status, exception) {
            $.mobile.loading('hide');
            alert(status + " " + exception);
        }
    })
}

用于加载轮播。第一次加载很好。但是,如果我们点击浏览器的后退按钮进入该页面,它就不会加载样式。如何解决这个问题?

这是一个单页应用,页面更改使用div id s

完成
<div id="home" data-role="page"></div>
<div id="secondPage" data-role="page"></div>
<div id="firstPage" data-role="page"></div>

0 个答案:

没有答案