Jquery Mobile持久頁腳 - 更改所有頁面上的內容

Question

我的頁面上持久頁腳有問題。我正在用Jquery Mobile創建一個Web應用程序。

link to my project site 當我單擊Add1按鈕時，我的頁腳更新「Order（1）」並增量，但是當我導航到第二頁時，我只看到「Order」並且沒有數字。

我的問題是，我該如何解決這個問題？

我想保留所有頁面的相同頁腳。

Answer 1

我查看了你的項目網站，你的代碼有一些錯誤。我一一解釋。

您多次使用相同的ID名稱（objednavka）。 ID名稱在文檔中必須是唯一的，不能多次使用。

如果要更新許多具有相同名稱的元素，請改用class。

您不需要使用pagebeforecreate，因爲您在一個文檔中具有多頁面模板（許多頁面），並且只有第一個在頁面加載時被加載。您需要一次創建所有的導航欄，以同時更新訂單和總計。

加1到變量更好的方法是使用加上加號（MYVAR ++）

而是再次是更新整個訂單按鈕包括（訂單）的文本，當您單擊添加1所使用的跨度與訂購旁邊的class="objednavka"並在那裏更新新號碼。

我們在Jquery Mobile中不使用$(document).ready(function() {作爲其框架並且有它自己的事件。根據需要使用這些JQM事件中的任何一種。 http://api.jquerymobile.com/category/events/

Jquery Mobile Page events的另一個不錯的指南可以在這裏找到。 http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/

trigger create已棄用，不再使用，雖然它仍然有效。你不需要在你的代碼中使用它。

演示

http://jsfiddle.net/fq8hp6rw/

你的新代碼

$('<div>').attr({'data-role':'footer','data-theme':'a','data-position':'fixed','data- 
id':'footer', 'data-tap-toggle': "false"}).append('\ 
<div data-role="navbar">\ 
<ul>\ 
<li class="lii"><a href="#mypanel" data-icon="shop">Order (<span class="objednavka">0</span>)</a> 
</li>\ 
<li><a href="#ucet" data-icon="gear" >My acc</a></li>\ 
</ul>\ 
</div>').appendTo('#jidlo, #napoje, #ucet');  

var cisloKliku = 1; 

$(document).on('click', '.button', function() { 

    $(".objednavka").text(cisloKliku) 

     cisloKliku++; 
    }); 

HTML改變

<h2 class='ucet_nadpis'>Moje objednávky: <span class="objednavka"></span></h2>