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>