Question

我想知道代码的哪些更改会使它在jqm 1.4.2中工作这段代码来自于我在2012年在JQuery Mobile上阅读的一本书。当我使用jqm ver 1.0但使用版本1.4.2时，这个考试工作正常。代码：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel ="stylesheet" href ="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src ="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"/> -->
        // <!-- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> -->
        // <!-- <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> -->
        <meta name ="viewport" content ="width = device-width, initial-scale = 1">
</head>
<body>
    <div data-role ="page">
        <div data-role ="header">
            <h1> Dynamic page </h1>
            </div> 
        <div data-role ="content">
                <a id="button1" href ="javascript:addPages()"data-role ="button"> Add Pages </a>
                <ul id="list1">
                </ul>
            </div>
    </div>
    <script>
function addPages() {
 for (var i = 1; i < 5; i++) {
    var page = $("<div>").jqmData("role", "page").attr("id", "page" + i); 
    // header 
    $("<div>").attr("data-role", "header").append($("<h1>").html("Page "+i+"</h1>")).appendTo(page); 


    // content 
      $("<div>").attr("data-role","content").append($("<p>")
        .html("Contents for page " + i)).appendTo(page);
         $("body").append(page);
         $("<li>").append($("<a>").attr("href","#page" + i).html("Go to page" + i)).appendTo("#list1");

         }      
          $("#button1").hide();
 }
    </script>

你可以复制并运行它，它会正常工作。如果你为css，jquery和jquery.mobile注释掉cdn，并取消注释后续的3个最新版本。标题都显示在一个页面上，该页面仅显示一个瞬间，而内容部分是唯一要显示的部分。

Answer 1

有几个地方需要检查。

jquery 1.42中的绑定事件已更改（请参阅文档）
可能有一些jquery ajax方法已经改变（取决于你的jquery版本）

我的代码在jquery mobile 1.0中运行良好，但在1.4.2中运行不正常

1 个答案: