Using fixed footer with Jquery mobile + phonegap on android

Using fixed footer with Jquery mobile + phonegap on android

I am building a phonegap app for Android using jquery mobile and having some 
trouble with fixed footers.

Please see the HTML code below.

     <!DOCTYPE HTML> 
<html>
<head>
<title>Test</title>
    <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js">
    </script>
    <script type="text/javascript" src="js/jquery-1.7.min.js">
    </script> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
    <script src="js/jquery.mobile-1.1.1.min.js"> </script>

</head>
<body>
<div data-role="page" id="home">

    <div data-role="header" data-position="fixed"
     data-tap-toggle="false">
        <h1>Test</h1>
    </div><!-- /header -->

    <div data-role="content">   

    <form id="searchform" action="" method="post" onsubmit="return false;"
    data-ajax="false">

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>

        <label for="city" class="select">City</label>
        <select name="city" class="city"></select>
    </form>

    <script type="text/javascript">
        $('.city').each(function() {
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
            $(this).append("<option>Nagpur</option>");
        });

    </script>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed"
    data-tap-toggle="false">
        <div data-role="navbar" data-iconpos="left">
            <ul>
                <li><a href="#help" data-icon="info" 
                data-transition="none">Help</a></li>
                <li><a href="#help" data-icon="star"
                 data-transition="none" >Favorites</a></li>
                <li><a href="#help" data-icon="arrow-r"
                 data-transition="none" >Results</a></li>
            </ul>
        </div>
    </div>

</div><!-- /page -->

<div data-role="page" id="help">
    <div data-role="header" data-position="fixed"
         data-tap-toggle="false">
            <h1>Help</h1>
        </div><!-- /header -->

    </div>
</div>  
</body>
</html>

There is a long form containing several fields including checkboxes, radio buttons, select lists etc. (using repeated select lists here to simulate). There is a fixed footer at the bottom. Things work fine on desktop browsers. But when I test on my phone having Android 2.3 I observe strange behaviour. Assuming the footer is hiding the select list underneath , if I click on any of the tabs on the navbar, the select list pops up whereas I would expect a transition to a new page. This is as if the select list is getting the click event instead of the footer. This is very annoying to the user. I have searched google but haven't seen this problem reported elsewhere.