Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Mobile - Back and forward browser buttons fire the pageinit event
    primarykey
    data
    text
    <p>In my Site, am seeing pageinit being called during browser's forward button selection. Is this correct. Will this not bind the registered events twice.</p> <p><strong>First.html</strong></p> <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt;          &lt;head&gt;         &lt;title&gt;Test1&lt;/title&gt;         &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;         &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;         &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /&gt;         &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt;         &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt;         &lt;script src="../scripts/common.js"&gt;&lt;/script&gt;     &lt;/head&gt;          &lt;body&gt;         &lt;div data-role="page" id="first"&gt;              &lt;h1 style="background: red"&gt;Swipe 1&lt;/h1&gt;   &lt;a href="second.html"&gt;Click&lt;/a&gt;         &lt;/div&gt;     &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>Second.html</strong></p> <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Test2&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"&gt;&lt;/script&gt; &lt;script src="../scripts/common.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page" id="second"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;jQuery Mobile&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;a href="third.html"&gt;Click&lt;/a&gt; &lt;/div&gt; &lt;div data-role="footer"&gt; &lt;h4&gt;www.jboss.org/developer&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>third.html</strong></p> <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;jQuery Mobile Template&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page" id="third"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;jQuery Mobile&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;ul id="listOfItems" data-role="listview" data-inset="true" data-filter="true"&gt; &lt;li&gt;&lt;a href=""&gt;One&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Two&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href=""&gt;Three&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div data-role="footer"&gt; &lt;h4&gt;www.jboss.org/developer&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>common.js</strong></p> <pre class="lang-js prettyprint-override"><code>$(document).on('pageinit', "#first", function (event) { console.log("first"); }); $(document).on('pageinit', "#second", function (event) { console.log("second"); }); $(document).on('pageinit', "#third", function (event) { console.log("third"); }); </code></pre> <p>Can you check the above code and let me know why pageinit is called everytime. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload