问题

I have a page1.html that has a link in it like this:

<a href="page2.html">PAGE2</a>

A part page2.html is like this:

<html>
<head>
</head>
<body>
<div data-role="page">
</div>
<script src="file1.js"></script>
<script src="file.js"></script>
</body>
</html>

And also this:

<html>
<head>
</head>
<body>
<div data-role="page">
</div>
<div data-role="page">
<script src="file1.js"></script>
<script src="file.js"></script>
</div>
</body>
</html>

These two js files implement some functionality on page2.html, but when navigating to page2.html via page1.html these two files wont work, but when done with data-ajax="false" it works. What is wrong. Where should the scripts be placed? I need default ajax for smoother transitions.

回答1:

Update

As per your updated question, you can't mix Single Page Model with Multi-Page Model. When you load page2.html first data-role="page and ONLY first one is loaded. Anything else is neglected.

Example:

index.html (first page loaded) - All tags within <html> are loaded into DOM whether Ajax is enabled or disabled.

<html>
  <head>
    <!-- JS, CSS, etc.. -->
  </head>
  <body>
    <!-- pages -->
  </body>
</html>

page2.html - All tags are neglected except for FIRST data-role="page" and its' content, when Ajax is enabled.

<!-- libraries in head are neglected -->
<head>
  <!-- JS, CSS, etc.. -->
</head>
<body>

<!-- ONLY first page is loaded -->
  <div data-role="page">
   <!-- JS -->
  </div>
<!-- next pages are neglected -->
  <div data-role="page">
  </div>
</body>

When using Single Page Model and Ajax is enabled, you have to place JS libraries/code for the external page inside <div data-role="page">.

<div data-role="page">
  <script src="file1.js"></script>
  <script src="file.js"></script>
</div>

jQuery Mobile loads external pages via Ajax, it loads ONLY first <div data-role="page"> in <body and neglects any other tags out side page div.

来源：https://stackoverflow.com/questions/21625225/as-in-javascript-is-not-loaded-into-dom-in-jquery-mobile

标签

javascript