ListView Problem

ListView Problem

Evenin' all. I'm new to jQuery but have some html experience. I'm having a terrible time with my first try at jQuery Mobile making a simple mobile website. My problem is with ListView. I have struggled all day and can't find any problem with the code, but that doesn't mean I couldn't miss it. What happens is I'm trying to start with a simple 4 page site (Home, About Us, Chapter Staff, & Event Calendar) and when I try to use the ListView to navigate to the pages the only one that works is the About Us link. From there I can click on the home button to return to the Home page but all the other pages are not working. I'm going to attach the code below if some of you guru's wouldn't mind to take a look at it and see what I'm missing. Thanks in advance for any help on this.

<!DOCTYPE html>
<html>
<head>
    <title>GWRRA Chapter TN-M</title>
   
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>

<!-- Start of first page: #page1 -->
<div data-role="page" id="page1">

    <div data-role="header">
        <h1>GWRRA Chapter TN-M</h1>
    </div><!-- /header -->

<div data-role="content">
        <ul data-role="listview" data-divider-theme="a" data-inset="true">
            <li data-theme="a">
                <a href="#page2" data-transition="slide">
                    About Us
                </a>
            </li>
            <li data-theme="a">
                <a href="#page3" data-transition="slide">
                    Staff
                </a>
            </li>
            <li data-theme="a">
                <a href="#page4" data-transition="slide">
                    Event Calendar
                </a>
            </li>
        </ul>
    </div>

    <div data-role="footer">
        <h4>Copyright Chapter TN-M 2013</h4>
    </div><!-- /footer -->
</div><!-- /page -->


<!-- Start of second page #page2 -->
<div data-role="page" id="page2">

        <div data-theme="a" data-role="header">
        <a data-role="button" href="#page1" data-icon="arrow-l" data-iconpos="left"
        class="ui-btn-left">
            Home
        </a>
    <div data-role="header">
        <h1>About Us</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>       
        <p><a href="#page1">Back to: GWRRA Chapter TN-M</a></p>
        <p><a href="#page3">Chapter Staff</a></p>
       
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Copyright Chapter TN-M 2013</h4>
    </div><!-- /footer -->
</div><!-- /page -->

<!-- Start of third page #page3 -->
<div data-role="page" id="page3">

        <div data-theme="a" data-role="header">
        <a data-role="button" href="#page1" data-icon="arrow-l" data-iconpos="left"
        class="ui-btn-left">
            Home
        </a>
    <div data-role="header">
        <h1>Chapter Staff</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>I'm the third in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>       
        <p><a href="#page1">Back to: GWRRA Chapter TN-M</a></p>
        <p><a href="#page2">About Us</a></p>
       
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Copyright Chapter TN-M 2013</h4>
    </div><!-- /footer -->
</div><!-- /page -->

<!-- Start of forth page #page4 -->
<div data-role="page" id="page4">

        <div data-theme="a" data-role="header">
        <a data-role="button" href="#page1" data-icon="arrow-l" data-iconpos="left"
        class="ui-btn-left">
            Home
        </a>
    <div data-role="header">
        <h1>Event Calendar</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>I'm the forth in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>       
        <p><a href="#page1">Back to: GWRRA Chapter TN-M</a></p>
        <p><a href="#page3">Chapter Staff</a></p>
       
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Copyright Chapter TN-M 2013</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>