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.

回答1:

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

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

回答2:

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>

来源：https://stackoverflow.com/questions/9836112/jquerymobile-script-runs-twice-on-each-pageload

标签

jquery-mobile