title: call JS function after page change on a SPA in jQuery Mobile
body: <p>I'm building a jQuery Mobile site for a PhoneGap Android Application.
  I'm using the SPA technique and the site is multilanguage since I use i18n to handle it.</p>
  
  <p>The problem is: when I click on a link which changes me the view on the site, pratically switching from one page to another, the loaded page has no strings loaded. I've tried a bunch of events to call the js function to re-load the strings but nothing happens.
  I show you some code here.</p>
  
  <p>translation.js</p>
  
  <pre><code>$(document).on('pageshow', function () {loadLang(); );});
  
  function loadLang() {
   if (localStorage.getItem("language") == "")
      localStorage.setItem("language", "it");
  
   language= localStorage.getItem("language");
   alert (language);
   i18n.init({ lng: language, load: 'unspecific', debug: true }, function() {
   [...]
   }
  }
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;div data-role="page" class="responsive-panel" id="home" data-url="home" data-title="Home"&gt;
      &lt;div data-role="header" style="width:100%; padding-bottom: 0px; background:url(img/0.jpg) no-repeat center center fixed; "&gt;
          &lt;a href="#nav-panel" data-icon="bars" class="ui-btn-right" data-iconpos="notext"&gt;Menu&lt;/a&gt;
          &lt;img src="img/logo-richiesta.png" width="50%"&gt;&lt;br&gt;
          &lt;div id="cozy" data-i18n="cozy" style="text-align: center; font-size: 5vw; font-family: Quicksand; color: white;"&gt; &lt;/div&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;img src="img/1.png" width="20%" style="padding-left: 7%; padding-right: 5%;"&gt;
          &lt;img src="img/2.png" width="20%" style="padding-left: 5%; padding-right: 5%;"&gt;
          &lt;img src="img/3.png" width="20%" style="padding-left: 5%;"&gt;
  
          &lt;form&gt;
              &lt;div&gt; &lt;br&gt; &lt;/div&gt;
              &lt;div style="text-align: center; font-weight: bold; font-size: 5.5vw; color: #f9b000"&gt; #1 &lt;/div&gt;
              &lt;label id="WWWL" data-i18n="WWWL" style="font-size: 5vw; font-family: Quicksand; text-align: center; color: white;" for="richiesta"&gt; &lt;/label&gt;
              &lt;textarea name="richiesta" id="richiesta"&gt;&lt;/textarea&gt;
              &lt;div class="ui-grid-a"&gt;
                  &lt;div class="ui-block-a"&gt;
                      &lt;input type="text" data-clear-btn="true" name="nome" id="nome" value data-i18n="[placeholder]name"&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-block-b"&gt;
                      &lt;input type="text" data-clear-btn="true" name="email" id="email" value data-i18n="[placeholder]email"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;button id="next" type="submit" style="background-color: #f9b000; background-image: url(img/bg_puls_avanti.jpg); background-repeat: no-repeat; background-position: right; margin-left: 35%; width: 30%; font-family: 'Lily Script One', cursive; text-align: left;" data-i18n="next"&gt;&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div data-role="content" style=" padding-top: 0px; width:100%; background:url(img/bg_header.png) no-repeat center center fixed; "&gt;
          &lt;h5 id="lifestyle" style="text-align: center; font-size: 4vw; font-family: 'Lily Script One', cursive;" data-i18n="lifestyle"&gt; &lt;/h5&gt;
      &lt;/div&gt;
      &lt;div data-role="panel" data-position="right" data-display="push" data-theme="e" id="nav-panel"&gt;
          &lt;ul data-role="listview"&gt;
              &lt;li data-icon="delete"&gt;&lt;a href="#" data-rel="close" id="menuclose" data-i18n="menuclose"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html/#home" id="home" data-i18n="home"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:apriMenuLink(1)" id="offers" data-i18n="offers"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:apriMenuLink(2)" id="lastm" data-i18n="lastm"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="wishlist" data-i18n="wishlist"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div style="padding-top: 15%"&gt; 
              &lt;a href="javascript:changeLang(1)"&gt;&lt;img src="img/it.png" width="12%"&gt; &lt;/a&gt;
              &lt;a href="javascript:changeLang(2)"&gt;&lt;img src="img/en.png" width="12%"&gt; &lt;/a&gt;
              &lt;a href="javascript:changeLang(3)"&gt;&lt;img src="img/de.png" width="12%"&gt; &lt;/a&gt;
              &lt;a href="javascript:changeLang(4)"&gt;&lt;img src="img/fr.png" width="12%"&gt; &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div data-role="page" class="responsive-panel" id="searchPage" data-url="searchPage" data-title="Panel Responsive" data-url="index.html"&gt;
      &lt;div data-role="header" style="width:100%; padding-bottom: 0px; background:url(img/0.jpg) no-repeat center center fixed; "&gt;
          &lt;a href="#nav-panel" data-icon="bars" class="ui-btn-right" data-iconpos="notext"&gt;Menu&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div data-role="panel" data-position="right" data-display="push" data-theme="e" id="nav-panel"&gt;
          &lt;ul data-role="listview"&gt;
              &lt;li data-icon="delete"&gt;&lt;a href="#" data-rel="close" id="menuclose" data-i18n="menuclose"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="index.html/#home" id="home" data-i18n="home"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:apriMenuLink(1)" id="offers" data-i18n="offers"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="javascript:apriMenuLink(2)" id="lastm" data-i18n="lastm"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" id="wishlist" data-i18n="wishlist"&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div style="padding-top: 15%"&gt; 
              &lt;a href="javascript:changeLang(1)"&gt;&lt;img src="img/it.png" width="12%"&gt; &lt;/a&gt;
              &lt;a href="javascript:changeLang(2)"&gt;&lt;img src="img/en.png" width="12%"&gt; &lt;/a&gt;
              &lt;a href="javascript:changeLang(3)"&gt;&lt;img src="img/de.png" width="12%"&gt; &lt;/a&gt;
              &lt;a href="javascript:changeLang(4)"&gt;&lt;img src="img/fr.png" width="12%"&gt; &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>