Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
174 views
in Technique[技术] by (71.8m points)

as in Javascript is not loaded into dom in jquery mobile

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...