更新

Question

我使用jQuery Mobile 1.4.0，当我创建一些文件时
page1.html
page2.html
第一个加载的是page1.html，如example/page1.html，当我点击第1页中的某个链接时，page2.html的加载方式就像example/page2.html

但是第2页中的脚本和样式没有运行它只在我直接访问url（或刷新）时运行

我找到了两种方式 - 将所有脚本/样式放入文件中，并在第一页和其他页面中调用它们 - 将自定义脚本放在自定义页面中的div标签内

我能做的最好的方法是什么？感谢。

更新

我做了像

这样的例子

enter image description here
page1.html

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <ul data-role="listview" data-inset="true" data-divider-theme="a">
            <li data-role="list-divider">Page1</li>
            <li><a href="page2.html">Page2</a></li>
            <li><a href="#">test</a></li>
            <li data-role="list-divider">test</li>
            <li><a href="#">test</a></li>
            <li><a href="#">test</a></li>
        </ul>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

page2.html

enter image description here

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <style>
        /*not running except access directly this page or refresh*/
        .ui-listview{
            margin-top: 0px !important;
        }
    </style>
    <script>
    $(function(){
        $('#myclick').on("touchstart click", function(){
            alert('not running except access directly this page or refresh');
        });
    });
    </script>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <ul data-role="listview" data-inset="true" data-divider-theme="a">
            <li data-role="list-divider">Page2</li>
            <li><a href="#" id = "myclick">Page1</a></li>
        </ul>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

Answer 1

最佳做法是，确实有一个单独的文件文件，您可以在其中加载HTML结构的顶部。从doctype开始，大多数文件结束文件或在文件中开始标记。

可以在所有其他页面上调用此文件，添加脚本或样式表只需要编辑一个文件。

标题中的脚本和样式未在第二个文件中运行

更新

1 个答案: