1

我有一种情况，当用户将某些东西放入购物车时，我想显示一个检查图标。我已经有一个按钮，所以这将显示两个按钮，如下所示：

我多么想要

我在第一页上正确显示，所有其他页面显示如下：

它是如何出现的

这是它们在每个页面的标题中的定义方式（所有页面都包含在同一个文件中）：

<div class="ui-btn-right">    
<a class="checkOutButton" data-role="button" id="checkOutButton" href="" data-icon="check" data-iconpos="notext"></a>   
<a class="logoffButton" data-role="button" id="logoffButton" href="#logout" data-icon="delete" data-iconpos="notext"></a> 
</div>

这就是我在我的就绪代码中初始化它们的方式：

$('.checkOutButton').bind('click',checkOut);
$('.checkOutButton').hide();

这就是我在 addCart() 函数中显示它们的方式：

$('.checkOutButton').show();

所有按钮都显示，但仅在主页（第一页）上正确嵌入。如果我单击或点击按钮，它们都会识别单击。是否有一些我似乎不知道的必须设置的宽度 CSS 值？我使用了一个包装器，但它具有我不想要的容器轮廓（另外，我认为它也不能在所有页面上正确工作，但由于我不喜欢它的外观，所以没有进行调查）。

看起来这应该很容易，但我已经通过书籍和谷歌没有成功。以下是帮助页面的示例（所有页面都遵循相同的结构）：

<div data-role="page" id="help" data-title="Help Information">
<div data-role="header" data-position="fixed" data-theme="e">
<a href="#home" data-icon="home" data-iconpos="notext"></a>
<h1>Help Information</h1>     
<div class="ui-btn-right">
<a class="checkOutButton" data-role="button" id="checkOutButton" href="" data-icon="check" data-iconpos="notext"></a>
<a class="logoffButton" data-role="button" id="logoffButton" href="#logout" data-icon="delete" data-iconpos="notext"></a>
</div>
</div><!-- /header -->         
<div data-role="content">           
<p>God helps those who help themselves. (At least until I get some time to write actual help information.</p>                   
</div><!-- /content -->          
</div><!-- /help-->

以下是根据 Marco 的请求添加的所有涉及的 javascript：

//
//    Add to cart code
//
function addToCart(what,uid) {
    $('.checkOutButton').show();
    $.mobile.changePage("#showCart");
}
//
//      On ready init code
//
$(document).ready(function() {
    $('.logoffButton').bind('click',logoffUser);
    $('.checkOutButton').bind('click',checkOut);
    $('.checkOutButton').hide();                 
});
//
//   Checkout screen stub
//
function checkOut() {
    alert("Imagine a checkout screen here");
}

以下是当用户单击对话框中的添加到购物车按钮时调用的 javascript 链接：

<a href="javascript:addToCart('basicSearch',uid)" data-role="button" data-inline="true" data-theme="b">Add to Cart</a>

就像我上面说的，第一个/主屏幕将正确显示，问题是第二个到 N 个屏幕不显示。我使用的顺序是从结果页面单击添加到购物车，单击更多购物按钮或单击后退按钮，然后单击帮助页面链接之类的内容。帮助页面将不正确地显示图标。

4

0 回答 0