JQM在同一页面中加载

时间:2013-06-27 07:28:18

标签: jquery jquery-mobile text load loading

我有一个问题.. 我有一个这样的页面:

 <div data-role="content">


    <div id="loadingSchedaAuto" ></div> 

        <div id="datiAuto" style="display:none">

            <img src=""  class="imgPrincipale" alt="" width="100%" height="auto" style="padding:2px; border:1px solid #000;"  />

            <p class="nome" align="center"></p>

            <ul style="padding: 5px; " data-role="listview" data-inset="true" data-theme="a" >

            <li data-role="list-divider">Dati generali</li>
            <li>
                <strong>Prezzo</strong>: <span class="prezzo" style="color:#E30025; font-weight: bold;"></span>
            </li>
            <li>
                <strong>Alimentazione</strong>: <span class="alimentazione"></span>
            </li>
            <li>
                <strong>Cilindrata</strong>: <span class="cilindrata"></span>
            </li>
            <li>
                <strong>Potenza</strong>: <span class="potenza"></span>
            </li>
            <li>
                <strong>Colore</strong>: <span class="colore"></span>
            </li>

            <li id="immatricolazione" > <!-- id aggiunto per poter inserire una li degli interni dopo immatricolazione -->
                <strong>Immatricolazione</strong>: <span class="immatricolazione"></span>
            </li>

            <div data-role="collapsible" data-collapsed="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
                <h3>Cambio</h3>
                <ul data-role="listview">
                <li>
                <span class="cambio"></span>
                </li>
                </ul>

            </div>
            <div data-role="collapsible" data-collapsed="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" id="equipaggiamento">
                <h3>Equipaggiamento</h3>
                <ul class="equip" data-role="listview" data-mini="true"></ul>
            </div>
        </ul>



    </div>

</div>

id = datiAuto的div是dinamic,我需要在每次加载之前显示加载消息。

我做了这个功能:

      function showLoading(loading, scheda) {
 alert("load pagina");
 $(loading).show();
 $(scheda).hide();


};

function showSchedaAuto(loading, scheda) {

    $(loading).remove();
    alert("pagina caricata");
     $(scheda).show();


    };

我在这里调用此函数:

 $(document).delegate("#scheda-auto", "pageshow", function() {

    showLoading("#loadingSchedaAuto", "#datiAuto"); 

    $("#scheda-auto").load("scheda.html #datiAuto", function() {

        showSchedaAuto("#loadingSchedaAuto", "#datiAuto");
    });..................

这个作品一次,但是第二次我试图展示Div,页面是空白的!!

任何人都可以帮助我吗?

谢谢! 大卫

2 个答案:

答案 0 :(得分:0)

如果您说代码工作正常但可能是jquery版本正在创建此问题,请尝试使用.on()代替.delegate()

希望此代码适合您:

$(document).on("pageshow","#scheda-auto", function() {

   .......
    });  

答案 1 :(得分:0)

我认为问题出在这里

function showSchedaAuto(loading, scheda) {

    $(loading).remove(); 
    alert("pagina caricata");
    $(scheda).show();

};

$(loading).remove(); //你要从DOM中删除元素,可能你想隐藏它

同样使用.on(),不推荐使用.delgate()。 on()的语法与委托略有不同。