Jquery Mobile 持久页脚 - 更改所有页面上的内容答案

【问题标题】：Jquery Mobile persistent footer - change content on all pagesJquery Mobile 持久页脚 - 更改所有页面上的内容
【发布时间】：2015-02-04 00:38:05
【问题描述】：

我的页面上的持久页脚有问题。我正在使用 Jquery Mobile 创建一个 Web 应用程序。

link to my project site 当我单击 Add1 按钮时，我的页脚会更新“Order(1)”并增加，但是当我导航到第二页时，我只看到“Order”而没有数字。

我的问题是，我该如何解决这个问题？

我想为所有页面保留相同的页脚。

【问题讨论】：

标签： jquery jquery-mobile dynamic footer persistent

【解决方案1】：

我查看了您的项目网站，您的代码有一些错误。我一一解释。

您多次使用相同的 ID 名称 (objednavka)。 ID 名称在文档中必须是唯一的，并且不能多次使用。

如果您想更新许多具有相同名称的元素，请改用class。

您不需要使用 pagebeforecreate，因为您在一个文档中有一个多页面模板（许多页面），并且只有第一个在页面加载时加载。您需要一次创建所有导航栏以同时更新订单和总数。

要给变量加 1，更好的方法是使用 plus plus (myvar++)

当您单击添加 1 时，不要再次更新包含（订单）文本的整个订单按钮，而是在订单旁边使用带有 class="objednavka" 的跨度并在那里更新新编号。

我们在 Jquery Mobile 中不使用 $(document).ready(function() { 作为它的框架并且有它自己的事件。而是根据需要使用任何这些种类的 JQM 事件。 http://api.jquerymobile.com/category/events/

另一个很好的 Jquery 移动页面事件指南可以在这里找到。 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>

【讨论】：