jquery移动标题按钮未对齐

Question

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

我在第一页上正确地看到了我，所有其他页面都显示如下：

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

<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>

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

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

这是我在addCart（）函数中显示它们的方式：

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

显示所有按钮，但仅在主页上正确排列（第一页）。如果我点击或点击按钮，他们都会识别出点击。是否有一些宽度CSS值必须设置，我似乎没有意识到？我使用了一个包装器，但它有容器的轮廓，我不想要（另外，我不认为它在所有页面上都正常工作，但没有调查因为我不喜欢这个外观）。

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

<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个屏幕没有。我使用的顺序是从结果页面单击添加到购物车，单击更多购物按钮或单击后退按钮，然后单击帮助页面链接。帮助页面将错误地显示图标。