为什么我的 jquery 移动版的 javascript 和 css 样式有时只加载

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

本文关键字：样式 css 加载 javascript jquery 我的 移动 为什么      更新时间：2023-09-26

我想知道为什么我的jquery移动样式有时只有在我点击名为"注册"的链接之前按下刷新按钮时才加载。

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

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

这是链接：http://71.162.197.6/iGotChu/www/

如果你想看看它在jsfiddle上是什么，这里是：enter code here http://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>

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

$("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>，我认为您不需要这样做。

第一次在 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调用，旧页面也会被保存并且html也不会重新加载。这与我之前的说法是一致的，即页面只创建一次。为了强制重新加载/通知页面已更改，我制作了一个补充方案，用于 ajax 调用，html 使用函数更新

$('#usersList').listview('refresh');
相关文章：