无法获取未定义或空引用的属性更改页

Question

When i tap on my inquiry list button, I get in javascript "unable to get property changepage of undefined or null reference"

this is my code

index.html

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>Emoney</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <!--
                <link rel="shortcut icon" href="images/favicon.png">
                <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
            -->
            <link href="jqueryMobile/jquery.mobile-1.4.0.css" rel="stylesheet">
            <link rel="stylesheet" href="css/main.css">
            <link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.0.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
            <script src="jqueryMobile/jquery.mobile-1.4.0.js"></script>
        </head>
        <body style="display: none;">
            <div data-role="page" id="page">
                <div data-role="content" style="padding: 15px">
                    <!--application UI goes here-->
                    <ul data-role="listview" id="listview" data-inset="true">
                        <li data-role="list-divider" id="divider">Sentrapay E-Money</li>
                        <li id="inquiry"><a href="#">Inquiry</a></li>
                        <li id="topup"><a href="#">Top Up</a></li>
                        <li id="listitem1"><a href="#">Item</a></li>
                    </ul>
                </div>
            </div>
            <div data-role="page" id="inquiry">
            <div data-role="content" style="padding: 15px">
            <ul data-role="listview" id="inquiryList" data-inset="false" data-theme="c"></ul>
            </div>
            </div>

            <div data-role="page" id="topup">
            <div data-role="content" style="padding: 15px"></div>
            </div>

    <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

Main.js

function wlCommonInit(){
    // Common initialization code goes here
}


    $('#inquiry').on('click', function(){
        $.mobile.changePage('#inquiry');
        doGetInquiry();
    });

//  function doGetInquiry(){
//      $.mobile.loading("show");
//      var invocationData = {
//              adapter : 'InquiryAdapters',
//              procedure : 'getInquiry',
//              parameters : []
//          };
//      
//      var options = {
//              onSuccess: doGetInquiryFinish,
//              onFailure: doGetInquiryFinish
//      };
//      WL.Client.invokeProcedure(invocationData, options);
//  }

    function doGetInquiry(){
        $.mobile.loading("show");
        var invocationData = {
                adapter : 'InquiryAdapters',
                procedure : 'getFeedsFiltered',
                parameters : []
            };

        var options = {
                onSuccess: doGetInquiryFinish,
                onFailure: doGetInquiryFinish
        };
        WL.Client.invokeProcedure(invocationData, options);
    }

    function doGetInquiryFinish(result){
        if(result.invocationResult.inquiry.length>0){
            buildInquiryList(result.invocationResult.inquiry);
        }else{
            $.mobile.loading("hide");
            alert("Please try again later!");
        }
    }

    function buildInquiryList(inquiry){
        var ul = $('#inquirytList');
        for (var i = 0; i < inquiry.length; i++) {
            var li = $('<li/>').text(inquiry[i].title);
            var pubDate = $('<div/>', {
                'class': 'pubDate'
            }).text(inquiry[i].pubDate);

            li.append(pubDate);

            ul.append(li);
        }




//      console.log("in buildInquiryList()");
//      $("#inquirytList").empty();
//      var item, i;
//      for(i=0;i<inquiry.length;i++){      
//          item = inquiry[i];              
//              var html = "";                          
////                html += "<h3 class='ui-li-heading'>" + item.accountName + "</h3>";
////                html += "<p class='ui-li-desc'>" + item.accountNumber + "</p>";
////                if(item.accountBalance.indexOf("(")>-1){
////                    html += "<div class='rightText negative'>$" + item.accountBalance + "</div>";                   
////                }else{
////                    html += "<div class='rightText'>$" + item.accountBalance + "</div>";
////                }                                                                                                                           
////                var listItem = $('<li class="acctItem" acct_name="' + item.accountName + '" data="' + item.accountNumber + '"><a href="#">' + html + '</a></li>');          
////                $("#accountList").append(listItem);                         
//      }
////        $("#accountHeaderLabel").html("Account List");
////        $('#accountList:visible').listview('refresh');  
//      $.mobile.loading("hide");
//      
    }