Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery mobile data-rel="back" link causing wrong events to be fired
    primarykey
    data
    text
    <p>Have a look at the <a href="http://dl.dropbox.com/u/16705233/data-rel-back.html" rel="nofollow">test-case</a></p> <p>When you open the link, <code>pagebeforeshow</code> for <em>page 1</em> is fired. When you click the link to go to <em>page 2</em>, <code>pagebeforeshow</code> for <em>page 2</em> is fired. So far, so good.</p> <p>If you then use the left button (<code>data-rel="back"</code>) to go back, excess events are fired. Using the right button instead (direct link to <em>page 1</em>) does what I'd expect, namely, only <code>pagebeforeshow</code> for <em>page 1</em> gets fired.</p> <p><code>pagebeforeshow</code> can also be replaced with <code>pageshow</code>, doesn't matter. What's happening here?</p> <p>(Tested in up-2-date Chrome)</p> <p>Source for reference:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt; &lt;script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"&gt;&lt;/script&gt; &lt;script&gt; $('#test1').live('pagebeforeshow', function() { console.log("=== pagebeforeshow for #test1"); }); $('#test2').live('pagebeforeshow', function() { console.log("=== pagebeforeshow for #test2"); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page" id="test1"&gt; &lt;div data-role="header" align="center"&gt; &lt;p&gt;Page 1.&lt;/p&gt; &lt;/div&gt;&lt;!-- /header --&gt; &lt;div data-role="content"&gt; &lt;p&gt;&lt;a href="#test2"&gt;Go to page 2.&lt;/a&gt;&lt;/p&gt; &lt;/div&gt;&lt;!-- /content --&gt; &lt;/div&gt;&lt;!-- /page --&gt; &lt;div data-role="page" id="test2"&gt; &lt;div data-role="header" align="center"&gt; &lt;a href="/" data-icon="back" data-rel="back"&gt;Back&lt;/a&gt; &lt;p&gt;Page 2.&lt;/p&gt; &lt;a href="data-rel-back.html" data-icon="back"&gt;Go directly to page 1&lt;/a&gt; &lt;/div&gt;&lt;!-- /header --&gt; &lt;div data-role="content"&gt; &lt;p&gt; Try the two buttons and have a look at the console.&lt;br&gt; Using the left button (data-rel="back") triggers "too many" events.&lt;br&gt; The right button does what I'd expect. &lt;/p&gt; &lt;/div&gt;&lt;!-- /content --&gt; &lt;/div&gt;&lt;!-- /page --&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    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