Повторный клик по ссылке

109

14 декабря 2019, 07:20

ситуация, если кликаю первый раз по ссылке(ajax пагинация)

<li class="active"><a href="katalog?page=2">2</a></li>

то в консоль выводится значение href + в самой ссылке href меняется на

<li class="active">
   <a href="?page=3&amp;pageId=6&amp;hash=a74ca72f5ecbe42aa9dd5fb6ecc49f22dd5ad18e">3</a>
</li>

пытаюсь кликнуть еще раз, но уже ничего не выводит

 $(document).ready(function (e) {
    $('.pagination ul li').on("click", "a", function(e) {
    e.preventDefault();
        var href = $(this).attr('href');
        var partsQ = href.split("?");
        var partsAmp = partsQ[1].split("&");
        var page = null;
        partsAmp.forEach(el => {
          var parts = el.split("=");
          if (parts[0] == "page")
            page = parts[1];
        });
        console.log(href)
    });
});

Answer 1

Предполагаю, что слетает обработчик с тега li из-за подгрузки.
Внутри блока с классом .pagination меняется код на подгруженый, на который не повешен обработчик.
Например, такой код работает (выводит номер текущей страницы):

$('.pagination').click(function(e) 
{
    let self = $(this).children('ul').children('.active').children('a');
    let href = self.attr('href');
    let partsQ = href.split("?");
    let partsAmp = partsQ[1].split("&");
    let page = null;
    partsAmp.forEach(el => 
    {
        let parts = el.split("=");
        if (parts[0] == "page")
        {
            page = parts[1];
        }
    });
    console.log('test', href, page)
});

Как костыль - после новой подгрузки вешать обработчик заново.

UPD:
Например, такой костыль работает (но не рекомендую):

$('.pagination').click(function(e) 
{
    console.log('test 0', 'pag click');
    let t = setTimeout(() => 
    {
        let elem = $(this).children('ul');
        test_log(elem);
    }, 5000);
});
function test_log(elem)
{
    //let self = elem.children('li').children('a');
    elem.children('li').each((e, li) =>
    {
        console.log('test 1', e, li);
        $(li).children('a').click(function(e) 
        {
            let href = $(this).attr('href');
            let partsQ = href.split("?");
            let partsAmp = partsQ[1].split("&");
            let page = null;
            partsAmp.forEach(el => 
            {
                let parts = el.split("=");
                if (parts[0] == "page")
                {
                    page = parts[1];
                }
            });
            console.log('test 2', href, page, self);
        });
    });
}