为什么我的 javascript 和 css 样式 jquery 移动设备有时只能加载？

Question

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

如果我点击后退按钮，然后在不刷新的情况下再次点击注册按钮，如果没有 jquery 样式，出现的列表看起来会完全不同。

我只是对发生的事情感到困惑。

这是 Link： http://71.162.197.6/iGotChu/www/

如果你想在 jsfiddle 上看到它是什么，它是：enter code herehttp://jsfiddle.net/ayz8sd6u/

**** 可悲的是，这个问题并没有出现在 jsfiddle 上。我尝试打印的列表在您按下注册后甚至没有显示。

<!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>

Answer 1

不确定从哪里开始，但我认为您遇到的问题是在您的循环中。尝试这样的事情：

$("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");
});

您每次都在打印新的 <ul>，我认为您不需要这样做。

Answer 2

感谢您的评论和输入。更重要的是，感谢您对我的问题投反对票 - 这很有帮助*咳嗽。

我找到了问题的解决方案。

在Jquery中第一次加载任何页面时，该页面是"CREATED"并且只创建一次然后保存到内存中。使用 "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 = "";
                    }
                });
            }
        });

但是，问题并未完全解决，因为如果由于缓存问题而需要更改 html，则需要刷新 html ] 即使调用 ajax 也不会重新加载。这与我之前关于页面仅创建一次的声明密切相关。为了强制 reload/notify 页面已更改，我制定了一个补充方案，该方案基于 ajax 调用，html 使用函数

更新

$('#usersList').listview('refresh');

为什么我的 javascript 和 css 样式 jquery 移动设备有时只能加载？

Why does my javascript and css styling for jquery mobile only sometimes load?

javascript

jquery-mobile