title: jQuery mobile data-rel="back" link causing wrong events to be fired
body: <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>