为什么我的jquery mobile javascript和css样式有时只加载？_Javascript_Jquery Mobile

为什么我的jquery mobile javascript和css样式有时只加载？

javascript jquery-mobile

为什么我的jquery mobile javascript和css样式有时只加载？,javascript,jquery-mobile,Javascript,Jquery Mobile,我想知道为什么只有在点击下一个名为“注册”的链接之前按下刷新按钮时，才会加载jquery mobile样式如果我点击后退按钮，然后再次点击注册按钮而不刷新，那么如果没有jquery样式，将显示的列表将完全不同我只是对正在发生的事感到困惑以下是链接：如果您想在JSFIDLE上看到它是什么，那么它就是：在这里输入code ****遗憾的是，这个问题没有出现在JSFIDLE上。我要打印的列表在您按“注册”后甚至没有显示 <!DOCTYPE HTML> <html> &

我想知道为什么只有在点击下一个名为“注册”的链接之前按下刷新按钮时，才会加载jquery mobile样式

如果我点击后退按钮，然后再次点击注册按钮而不刷新，那么如果没有jquery样式，将显示的列表将完全不同

我只是对正在发生的事感到困惑

以下是链接：

如果您想在JSFIDLE上看到它是什么，那么它就是：

在这里输入code

****遗憾的是，这个问题没有出现在JSFIDLE上。我要打印的列表在您按“注册”后甚至没有显示

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>changePage JSON Sample</title>

<link rel="stylesheet"     href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<script src="owl-carousel/owl.carousel.js"></script>



     <script>






    $(document).ready(function(){$('form').on('submit', function() { 
        var pageRequest = "" + $(this).attr('action');
        $.post($(this).attr('action'), $(this).serialize(),    function(data,status){
            //alert("Returned data: " + data);
            pageRequest = parsePhp(pageRequest);
            pageHandler(pageRequest, data);
        });
return false;
    });
    });
function parsePhp(pageRequest){
    var index1 = pageRequest.lastIndexOf("/");
        index1++;
        //alert(index1);
        var index2 = pageRequest.lastIndexOf(".");
        //alert(index2);
        var page = pageRequest.substring(index1,index2);
        //alert(page);
        return(page + "");
}


//Owl Carousel
$(document).ready(function() {
    $("#menu").owlCarousel({
        singleItem: true,
    });
    return(false);
});

</script>

<script>
     $(document).ready(function() {
    var at = $("a").attr("href");
    $("a").click(function(){
            //alert("the Attribute is: " + at);

            var print = "";
            for (i=0;i<10;i++){
                print = print + "<ul data-role='listview'><li><a     href='index.html'><img src='images/album-bb.jpg' /><h3>Broken Bells</h3>      <p>Broken Bells</p></a></li></ul>";
            }
            document.getElementById("test").innerHTML = print;

            $.mobile.changePage($(attribute),"slide");  
        }
        );
});




 function pageHandler(pageRequest, result){
    result = result + "";
    if(pageRequest == "register"){
            alert("Your account as been created!");
            $.mobile.changePage($("#loginPage"),"slide");
            }
    else if(pageRequest == "login"){
        alert("result data: " + result);
        if(result == "success"){
            $( ".loginPopUp" ).popup( "open");
            $.mobile.changePage($("#home"),"slide");
        }
        else{
            alert("Incorrect Credentials");
        }
    }
}

</script>

</head>

<body>

<div data-role="page" id="loginPage">
<div data-role="header">
      <h1> iGotYou! </h1>
</div>
<div data-role="main" class="ui-content">
<form method="post" action="http://71.162.197.6/iGotChu/php/login.php">
  <div class="ui-field-contain">
    <input type="text" name="userName" id="userName" placeholder="Username">
    <input type="password" name="password" id="passWord"  placeholder="Password">
    <input type="submit" value="Login">     
  </div>
 </form>
 <a href="#createAccountPage" data-role="button">Sign Up</a>

</div>
 </div>



<div data-role="page" id="createAccountPage">
 <a data-rel="back" data-icon="arrow-l" data-role="button">Create Account</a>
 <form method ="post" action ="http://71.162.197.6/iGotChu/php/register.php">
<div class="ui-field-contain">
    <input type="text" name="userName" id="userName" placeholder="User Name">
    <input type="text" name="firstName" id="firstName" placeholder="First Name">
    <input type="text" name="lastName" id="lastName" placeholder="Last Name">
    <input type="text" name="email" id="email" placeholder="Email Address">
    <input type="password" name="password" id="password" placeholder="Password">
    <input type="submit" value="Confirm">
    </div>
  </form>
  <div data-role = 'content'>
 <div class='content-primary' id = 'test'>

</div>
</div>
</div>




</body>
</html>


changePage JSON示例
$（document）.ready（function（）{$（'form'）。在（'submit'，function（）{
var pageRequest=”“+$（this.attr（'action'）；
$.post（$（this.attr（'action'），$（this.serialize（）），函数（数据，状态）{
//警报（“返回数据：”+数据）；
pageRequest=parsePhp（pageRequest）；
页面处理程序（页面请求、数据）；
});
返回false；
});
});
函数parsePhp（pageRequest）{
var index1=pageRequest.lastIndexOf（“/”）；
index1++；
//警报（index1）；
var index2=pageRequest.lastIndexOf（“.”）；
//警报（index2）；
var page=pageRequest.substring（index1，index2）；
//警报（第页）；
返回（第+页“）；
}
//猫头鹰转盘
$（文档）.ready（函数（）{
$（“#菜单”）.owlCarousel({
单项：对，
});
返回（假）；
});
$（文档）.ready（函数（）{
var at=$（“a”）.attr（“href”）；
$（“a”）。单击（函数（）{
//警报（“属性为：“+at”）；
var print=“”；
对于（i=0；i不确定从何处开始，但我认为您遇到的问题在您的循环中。请尝试以下方法：
$("a").click(function () {
    var printHtml = "<ul data-role='listview'>";
    for (i = 0; i < 10; i++) {
        printHtml += "<li><a href='index.html'><img src='images/album-bb.jpg' /><h3>Broken Bells</h3><p>Broken Bells</p></a></li>";
    }
    printHtml += "</ul>";
    $("#test").html(printHtml);
    $.mobile.changePage($(attribute), "slide");
});

$（“a”）。单击（函数（）{
var printHtml=“”；
对于（i=0；i<10；i++）{
printHtml+=“”；
}
printHtml+=“”；
$（“#test”）.html（printHtml）；
$.mobile.changePage（$（属性），“幻灯片”）；
});

你每次都在打印一个新的
，我认为你不需要这样做。
谢谢你的评论和意见。更重要的是，谢谢你对我的问题投了反对票-这很有帮助*咳嗽
我找到了解决问题的办法
第一次在Jquery中加载任何页面时，该页面被“创建”，只创建一次，然后保存到内存中。
使用“pagebeforecreate”事件侦听器，我可以在创建页面之前更改html。在API中，“pagebeforecreate”在执行jquery增强之前中断页面加载，因此，html被注入，然后增强脚本可以有序地完成工作
$(document).on("pagebeforecreate",function(event){
//alert("page before created activated");
var nextPage = event.target.id;
  var print = "";
            if (nextPage=="createAccountPage"){
                $.ajax({
                  url: '<your server>',
                  dataType: 'json',
                  async: true,
                  success: function(data) {
                    var print = "";
                    for (i=0;i<data.firstName.length;i++){
                        print = print + "<li><a href='index.html'><img src='images/album-bb.jpg' /><h3>"+data.firstName[i]+ " " + data.lastName[i] + "</h3><p>Broken Bells</p></a></li>";
                        } 
                        $("#usersList").html(print);
                        print = "";
                    }
                });
            }
        });

请在JSFIDLE中重新创建您的问题。没有人会单击该链接…尤其是当“我得到了CHU”时是url.LOL的一部分！你有一个观点，我正在尝试重新创建问题，但问题列表似乎没有加载到JSFIDLE上。我正在尝试打印列表中的元素10次，但是，在js FIDLE上它甚至不会加载，在我的服务器上它有时会加载具有正确样式的列表，而在其他时间则不会。你在上，我无法在JSFIDLE中看到问题，但这是在JSFIDLE上的问题。你是对的，我不必每次都打印它，但在我做了更改之后，它似乎没有什么不同。
$('#usersList').listview('refresh');