Question

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

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

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

如果你想看看它在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>

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，而旧页面将被保存并且即使ajax调用也不会重新加载html是。这与我先前声明页面仅创建一次的说法密切相关。为了强制重新加载/通知页面已被更改，我做了一个补充方案，用于调用ajax调用，html用函数更新

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

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

2 个答案: