Смена URL адреса страницы в JS без перезагрузки

390

08 августа 2017, 17:58

Имеется пагинация

<ul>
    <li><a href="?page=1&price=0-3500&tip_linz=krutie_linzi&brand=aqua-oko">1</a></li>
    <li><a href="?page=2&price=0-3500&tip_linz=krutie_linzi&brand=aqua-oko">2</a></li>
    <li><a href="?page=3&price=0-3500&tip_linz=krutie_linzi&brand=aqua-oko">3</a></li>
    <li><a href="?page=4&price=0-3500&tip_linz=krutie_linzi&brand=aqua-oko">4</a></li>
</ul>

Данные в <ul> подгружаются через AJAX и заменяются каждый раз, когда кликаем по <a> (POST запрос на back-end, в ответ получаем строку, содержащую новые ссылки для пагинации и вставляем их в <ul>)

Нужно при клике на <a> достать значение "href" и заменить, без перезагрузки страницы, текущий url на "sitename.ru/href"

Пытался сделать вот так, но увы, работает только при первом клике

    $('ul a').click(function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        window.history.pushState('', '', href);
    });

А нужно, что бы каждый раз url менялся

Answer 1

Проблема в том что ваш элемент пропадает после AJAX запроса, вместе со всеми хуками которые вы на него навесили. Решить это можно так:

$('body').on('click', "ul a", function() {
    e.preventDefault();
    var href = $(this).attr('href');
    window.history.pushState('', '', href);
});

Либо каждый раз после запроса заново вешать хук на новые элементы. Как вам удобней.