Databases
StackOverflow2013
Postsdbo
POjQuery Mobile: pagecreate event does not fire when navigating from page to page
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Mobile: pagecreate event does not fire when navigating from page to page
    text
    copied!<p>playing with 2 simple pages and jQuery Mobile.</p> <p>Trying to execute some js on each load of the page. For example show alert(1) for first page, and alert(2) for second one. When loading a page in a browser for a first time (or refreshing F5) it behaves as expected. However when I navigate from page 'one' to page 'two' using link - alert(2) does not show up.</p> <p>The way how I want to execute some js on each load is as explained here - <a href="http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html" rel="nofollow">http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/api/events.html</a> - using <code>pagecreate</code>.</p> <p>I found some similar questions here, but they do not answer what I need. My question is - what should I change to make it working?</p> <h2>My files here:</h2> <p>one.html:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;1&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" /&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"&gt;&lt;/script&gt; &lt;script&gt; $('#divTestEvent1').live('pagecreate',function(event){ alert(1); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- Start of first page --&gt; &lt;div data-role="page" id="divTestEvent1"&gt; &lt;ul data-role="listview"&gt; &lt;li&gt;&lt;a href="one.html"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="two.html"&gt;2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /page --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <hr> <p>two.html</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;2&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" /&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"&gt;&lt;/script&gt; &lt;script&gt; $('#divTestEvent2').live('pagecreate',function(event){ alert(2); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- Start of first page --&gt; &lt;div data-role="page" id="divTestEvent2"&gt; &lt;ul data-role="listview"&gt; &lt;li&gt;&lt;a href="one.html"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="two.html"&gt;2&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /page --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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