在jQuery Mobile中的SPA上更改页面后调用JS函数

Question

我正在为PhoneGap Android应用程序构建一个jQuery Mobile站点。 我正在使用SPA技术，因为我使用i18n来处理它，所以该网站是多语言的。

问题是：当我点击一个链接改变了网站上的视图时，实际上从一个页面切换到另一个页面，加载的页面没有加载任何字符串。我已经尝试了一堆事件来调用js函数来重新加载字符串，但没有任何反应。 我在这里给你看一些代码。

translation.js

$(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() {
 [...]
 }
}

的index.html

<div data-role="page" class="responsive-panel" id="home" data-url="home" data-title="Home">
    <div data-role="header" style="width:100%; padding-bottom: 0px; background:url(img/0.jpg) no-repeat center center fixed; ">
        <a href="#nav-panel" data-icon="bars" class="ui-btn-right" data-iconpos="notext">Menu</a>
        <img src="img/logo-richiesta.png" width="50%"><br>
        <div id="cozy" data-i18n="cozy" style="text-align: center; font-size: 5vw; font-family: Quicksand; color: white;"> </div>
        <br><br>
        <img src="img/1.png" width="20%" style="padding-left: 7%; padding-right: 5%;">
        <img src="img/2.png" width="20%" style="padding-left: 5%; padding-right: 5%;">
        <img src="img/3.png" width="20%" style="padding-left: 5%;">

        <form>
            <div> <br> </div>
            <div style="text-align: center; font-weight: bold; font-size: 5.5vw; color: #f9b000"> #1 </div>
            <label id="WWWL" data-i18n="WWWL" style="font-size: 5vw; font-family: Quicksand; text-align: center; color: white;" for="richiesta"> </label>
            <textarea name="richiesta" id="richiesta"></textarea>
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <input type="text" data-clear-btn="true" name="nome" id="nome" value data-i18n="[placeholder]name">
                </div>
                <div class="ui-block-b">
                    <input type="text" data-clear-btn="true" name="email" id="email" value data-i18n="[placeholder]email">
                </div>
            </div>
            <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"></button>
        </form>
    </div>
    <div data-role="content" style=" padding-top: 0px; width:100%; background:url(img/bg_header.png) no-repeat center center fixed; ">
        <h5 id="lifestyle" style="text-align: center; font-size: 4vw; font-family: 'Lily Script One', cursive;" data-i18n="lifestyle"> </h5>
    </div>
    <div data-role="panel" data-position="right" data-display="push" data-theme="e" id="nav-panel">
        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close" id="menuclose" data-i18n="menuclose"></a></li>
            <li><a href="index.html/#home" id="home" data-i18n="home"></a></li>
            <li><a href="javascript:apriMenuLink(1)" id="offers" data-i18n="offers"></a></li>
            <li><a href="javascript:apriMenuLink(2)" id="lastm" data-i18n="lastm"></a></li>
            <li><a href="#" id="wishlist" data-i18n="wishlist"></a></li>
        </ul>
        <div style="padding-top: 15%"> 
            <a href="javascript:changeLang(1)"><img src="img/it.png" width="12%"> </a>
            <a href="javascript:changeLang(2)"><img src="img/en.png" width="12%"> </a>
            <a href="javascript:changeLang(3)"><img src="img/de.png" width="12%"> </a>
            <a href="javascript:changeLang(4)"><img src="img/fr.png" width="12%"> </a>
        </div>
    </div>
</div>

<div data-role="page" class="responsive-panel" id="searchPage" data-url="searchPage" data-title="Panel Responsive" data-url="index.html">
    <div data-role="header" style="width:100%; padding-bottom: 0px; background:url(img/0.jpg) no-repeat center center fixed; ">
        <a href="#nav-panel" data-icon="bars" class="ui-btn-right" data-iconpos="notext">Menu</a>
    </div>

    <div data-role="panel" data-position="right" data-display="push" data-theme="e" id="nav-panel">
        <ul data-role="listview">
            <li data-icon="delete"><a href="#" data-rel="close" id="menuclose" data-i18n="menuclose"></a></li>
            <li><a href="index.html/#home" id="home" data-i18n="home"></a></li>
            <li><a href="javascript:apriMenuLink(1)" id="offers" data-i18n="offers"></a></li>
            <li><a href="javascript:apriMenuLink(2)" id="lastm" data-i18n="lastm"></a></li>
            <li><a href="#" id="wishlist" data-i18n="wishlist"></a></li>
        </ul>
        <div style="padding-top: 15%"> 
            <a href="javascript:changeLang(1)"><img src="img/it.png" width="12%"> </a>
            <a href="javascript:changeLang(2)"><img src="img/en.png" width="12%"> </a>
            <a href="javascript:changeLang(3)"><img src="img/de.png" width="12%"> </a>
            <a href="javascript:changeLang(4)"><img src="img/fr.png" width="12%"> </a>
        </div>
    </div>
</div>