Динамическое изменение класса элемента html в jquery mobile

У меня есть страница, которую я создал с помощью jquery mobile, и моя проблема заключается в том, как добавить класс ui-btn-active к элементу привязки на панели навигации страницы, не делая этого напрямую на html.

Я попытался добавить это в javascript function, который должен выполняться после загрузки страницы, но функция вызывается без внесения желаемых изменений.

Однако кажется, что элемент добавляет класс, когда я перезагружаю страницу.

Есть ли способ сделать это без перезагрузки страницы вручную?

Или мне нужно добавить функцию, которая автоматически перезагружает страницу каждый раз, когда выбирается новая страница?

function init(){
    //called each time a page loads from the html <script></script> tag
    $(document).on('pageload', function(){
        url = document.activeElement.baseURI;
        //alert(url);
        setActiveBtn(url);
        //window.location.reload();
     });

 }

function setActiveBtn(url){
    //split url, get the last part
    var splitted = url.split("/");
    t = splitted.length;
    var gizza = splitted[t-2]; 

    switch(gizza){
        case "":
            element = $("#home");
            element.addClass("ui-btn-active");
            break;
        case "news":
            element = $("#news");
            element.addClass("ui-btn-active");
            break;
    case "sign-up":
          element = $("#create_account");
          element.addClass("ui-btn-active");
          break;
    case "retrieve":
          element = $("#sign-in");
          element.addClass("ui-btn-active");
          break;
    default:
          element = $("#home");
          element.addClass("ui-btn-active");
}

}