Question

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

link to my project site 当我单击Add1按钮时，我的页脚会更新＆＃34; Order（1）＆＃34;和增量，但当我导航到第二页时，我只看到＆＃34;订单＆＃34;没有数字。

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

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

Answer 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 Mobile Page事件的另一个很好的指南。 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>

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

1 个答案: