CODEWITHSUNDEEP
jquery-mobile
Fredrik
Fredrik

Reputation: 1821

jQueryMobile script runs twice on each pageload

I've been trying to get a script that inserts a div of text after the first and second paragraph of an article to work in jQueryMobile. It works on the first pageload, but on the second it loads the content twice, and the third time it's loaded three times, and so on.

The jQueryMobile libraries and my script is loaded in the head:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="myscript.js">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

Then I have

<body id="mobile">
<div id="wrapper" data-role="page">

And then the content of the page

My script is executed as documented on jquerymobile.com

$("#wrapper").live('pageinit', function() {

Am I missing something? Any help will be deeply appreciated.

Upvotes: 0

Views: 3323

Answers (2)

leedm777
leedm777

Reputation: 24062

As Clarence commented, a better solution is to move the <script> tag outside of the <div> with data-role="page"

<body id="mobile">
  <div id="wrapper" data-role="page">
    <!-- stuff -->
  </div>
  <script>
    $("#wrapper").live('pageinit', function() {
      // more stuff
    });
  </script>
</body>

Upvotes: 1

dali
dali

Reputation: 164

try adding data-dom-cache="false" it should look like this 

<body id="mobile">
<div id="wrapper" data-role="page" data-dom-cache="false">

Upvotes: 2

Related Questions