Мобильное приложение JQuery - Обновление атрибута href в ссылке Navbar обновляется до «undefined»

Поэтому я создаю приложение для опроса, и в зависимости от одной выбранной страницы опроса одна из двух страниц будет загружена после того, как пользователь нажмет кнопку "Перейти". При определении того, какая ссылка для загрузки в свойство href go go, я также назначаю ссылку на страницу "назад" на странице будущего опроса... Я смущен тем, почему это возвращается неопределенным, поскольку я делаю то же самое раньше в приложение и ссылка кнопки возврата возвращают правильную ссылку...

Поэтому после вызова setSurveyFromSurvey5a(), как только пользователь отбирает "go" из survey5a, console.log($ ("# survey5bback"). Attr ("href")) возвращает "undefined", даже после того, как он должен был быть назначен в setSurveyFromSurvey5a()... он пройдет условие, чтобы установить значение href, но оно просто не меняет его, и я не уверен, почему...

Вот мой код:

Соответствующий javascript:

    function setSurveyFromSurvey5a(){
        if(goto5a){
            survey5adata.alo_wthfam = translateCheckBox($("#checkbox-alo_wthfam").prop("checked"));
            survey5adata.alo_wthpart = translateCheckBox($("#checkbox-alo_wthpart").prop("checked"));
            survey5adata.alo_wthwork = translateCheckBox($("#checkbox-alo_wthwork").prop("checked"));
            survey5adata.alo_wthfr = translateCheckBox($("#checkbox-alo_wthfr").prop("checked"));
            survey5adata.alo_wthoth = translateCheckBox($("#checkbox-alo_wthoth").prop("checked"));
        }

        //set go and back buttons:
        if(survey5adata.alo_wthfam == 2){
            goto5a1 = true;
            console.log("within survey5adata.alo_wthfam == 2");
            $("#survey5ago").attr("href", "#survey5a1");
            $("#survey5bback").attr("href", "#survey5a1");
        }
        else if(survey5adata.alo_wthfam == 1){
            console.log("within survey5adata.alo_wthfam == 1");
            goto5a1 = false;
            $("#survey5ago").attr("href", "#survey5b");
            $("#survey5bback").attr("href", "#survey5a");
        }

        console.log("#survey5ago:" + $("#survey5ago").attr("href"));
        console.log("#survey5bback:" + $("#survey5bback").attr("href"));
    }

Html from survey5a, survey5a1 и обзор 5b:

<div data-role="page" id="survey5a">
    <header data-role="header" data-theme="c">
        <img src="img/evl_logo2.png" class="evllogo" width="100"/>
        <img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
    </header>
    <div data-role="header" data-theme="e">
        <p>Tobacco Use Interview</p>
    </div>



    <div data-role="content">
        <div id="survey5acontent">
        </div>
    </div>


    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#survey4">Back</a></li>
                <li><a href="#main">Home</a></li>
                <li><a href="#" id="survey5ago" onclick="setSurveyFromSurvey5a()">Go</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- LINKED SURVEY5a1 -->

<div data-role="page" id="survey5a1">
    <header data-role="header" data-theme="c">
        <img src="img/evl_logo2.png" class="evllogo" width="100"/>
        <img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
    </header>
    <div data-role="header" data-theme="e">
        <p>Tobacco Use Interview</p>
    </div>



    <div data-role="content">
        <div id="survey5a1content">
        </div>
    </div>


    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#survey5a">Back</a></li>
                <li><a href="#main">Home</a></li>
                <li><a href="#survey5b">Go</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- LINKED SURVEY5b -->

<div data-role="page" id="survey5b">
    <header data-role="header" data-theme="c">
        <img src="img/evl_logo2.png" class="evllogo" width="100"/>
        <img src="img/uic_logo2.png" class="ui-btn-right" width="100"/>
    </header>
    <div data-role="header" data-theme="e">
        <p>Tobacco Use Interview</p>
    </div>



    <div data-role="content">
        <div id="survey5bcontent">
        </div>
    </div>


    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <!-- Need to determine how to go back correctly -->
                <li><a href="#" id="#survey5bback">Back</a></li>
                <li><a href="#main">Home</a></li>
                <li><a href="#survey6">Go</a></li>
            </ul>
        </div>
    </div>
</div>