jQuery Mobile 和固定页脚

Question

我有一个包含在 PhoneGap 中的 jQuery 移动应用程序。我正在尝试使用固定的页脚和页眉，但页脚遇到一些问题。如果我的内容具有 X 长度，然后单击后内容会变小 - 页脚会向上移动并且不会粘在屏幕底部。如果我点击屏幕，它就会回到原来的位置。

有什么想法为什么会发生这种情况吗？

我的页脚代码是:

<div data-role="footer" data-position="fixed" data-id="footer_main">
    <div data-role="navbar">
        <ul class="navbar">
            <li><a href="#home" data-icon="home" class="search">Home</a></li>
            <li><a href="#bycity" data-icon="search" class="search2">City</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

此问题在 Android 和 iPhone 上的发生方式几乎相同(iPhone 甚至可能更多)。

顺便说一句 - 我正在使用 jQuery mobile“jquery.mobile-1.0b2”和 PhoneGap 1.0

Answer 1

尝试向页脚添加一个类:

<div class=”footer” data-role="footer" .....>

并将以下函数添加到您的点击事件中:

$('.footer').trigger('create');

应该看起来像这样:

$('.class').click(function() {

    $('.footer').trigger('create');

});