jQuery单页移动应用

Question

I am trying to build a jQuery app with multiple page. 我正在尝试构建具有多个页面的jQuery应用程序。 Where different pages are placed in different html files. 不同的页面放置在不同的html文件中的位置。 index.html index.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Dynamic Page Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    </head>

    <body>
        <sciprt src="abc.js"></sciprt>
        <div data-role="page" id="home" data-title="Welcome">
            <div data-role="header">
                <h1>Dynamic Page</h1>
            </div>
            <div data-role="content">
                <input type=button id="changePage" value="Open dynamic page">
                <!--<a href="abc.html" data-prefetch>abc</a>-->
            </div>
            <script>
                $("#changePage").on("click", function() {
                    // Create page markup


                    // Enhance and open new page

                    $.mobile.changePage('abc.html');

                });
            </script>
        </div>
    </body>

</html>

abc.html abc.html

<div data-role=page data-url=hi id=abc>
    <div data-role=header id=first>
        <h1>
           <script>
            document.write(msg.first);</script>
        </h1>
    </div>
    <div data-role=content id=second>

           <script>
            document.write(msg.second);</script>
    </div>
</div>

abc.js abc.js

var msg = {
    first : 'I am First',
    second : 'I am Second',
    third : 'I am Third'

};

I don't understand where i am doing wrong.When there is no javascript im abc.html then it works, but when i try to use js, it just shows loading. 我不明白我在哪里做错了。当没有javascript im abc.html时它可以工作，但是当我尝试使用js时，它只是显示正在加载。

Any help would be great.... 任何帮助都会很棒。

Answer 1

First of all sorry because of the typo mistake i did at 首先很抱歉，因为我在打字错误

<sciprt src="abc.js"></sciprt>

It should be (Thanks to @Ingo Burk for pointing it out) 应该是（感谢@Ingo Burk指出来）

<script src="abc.js"></script>

Secondly i tried to using 其次，我尝试使用

$('#second').append(msg.second);
$('#first').append(msg.first);

But didn't work out then i used 但是我没有用

$('#second').html(msg.second);
$('#first').html(msg.first);

and that solved my problem. 那解决了我的问题。 And also don't use document.write() in a page, when u are loading page via $.load() . 当您通过$.load()加载页面时，也不要在页面中使用document.write() $.load() 。 I wasted 3 days because of this( thanks to @Ram for pointing it out). 因此，我浪费了3天（感谢@Ram指出这一点）。 Check https://github.com/jquery/jquery-mobile/issues/430 检查https://github.com/jquery/jquery-mobile/issues/430

jQuery单页移动应用

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-09-26 06:16:44

jQuery单页移动应用

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-09-26 06:16:44

解决方案1
0 已采纳 2013-09-26 06:16:44