Why is history api not working?

Question

JavaScript

Hello! The bottom line was that when you click on the link, the content changes without reloading. But the problem is that when you click on the third link on the first page, the content changes, everything works, but from the second page, when you go back to the first, the page reloads. What's wrong?

There is this code:

The structure of the first page

<div id="content">
                                      
                                        Текст текст текст

          <nav id="navigation">
            <ul>
              <li><a href="1.html">1</a></li>
              <li><a href="2.html">2</a></li>
              <li><a class="togo" href="/en/index.html">3</a></li>
            </ul>
          </nav>
        </div>

Structure the second page

<div id="content">
                                      
                                        Текст текст текст

          <nav id="navigation">
            <ul>
              <li><a href="1.html">1</a></li>
              <li><a href="2.html">2</a></li>
              <li><a class="togo" href="../index.html">3</a></li>
            </ul>
          </nav>
        </div>

$('document').ready(function(){
    $('.togo').on('click', function(e){      
        // отменяем стандартное действие при клике
        e.preventDefault();
        // Получаем адрес страницы
        var href = $(this).attr('href');
        // Передаем адрес страницы в функцию
        getContent(href, true);
    });
});

// Добавляем обработчик события popstate, 
// происходящего при нажатии на кнопку назад/вперед в браузере  
window.addEventListener("popstate", function(e) {
    // Передаем текущий URL
    getContent(location.pathname, false);
});

// Функция загрузки контента
function getContent(url, addEntry) {
    $.get(url).done(function(data) {
        // Обновление только текстового содержимого в сером блоке
        $('#content').html($(data).find("#content").html());
        // Если был выполнен клик в меню - добавляем запись в стек истории сеанса
        // Если была нажата кнопка назад/вперед, добавлять записи в историю не надо
        if(addEntry == true) {
            // Добавляем запись в историю, используя pushState
            history.pushState(null, null, url); 
        }
    });
}

Here's what else I noticed, if you go to the second page and refresh the page, then when you go to the main page, everything is OK, and back to the second reload. the opposite effect is

Answer 1

I didn't dig deep, but at first glance, your function is triggered when you click on a link with the class togo
On the third link it is registered, but on the second it is not.

<li><a href="1.html" class="togo">1</a></li>
<li><a href="2.html" class="togo">2</a></li>

Try it.
By the way, today the push state itself became interested ... tomorrow I will delve into it.