Jquery dynamic page - loading return false method still uses normal href link

Question

I am using jquery for dynamic content/page loading. I have a basic nav with links (for SEO purposes) and this code to check for click events and to make sure the new 'page' is browseable with history:

  $("nav a").on("click", function ()
    {
        let _href = $(this).attr('href');


        history.pushState(null, null, _href);
        loadContent(_href);

        $('.activePage').removeClass('activePage');
        console.log($('.activePage'));


        return false;
    });

    function loadContent(href)
    {

        let page = $("#pageWrapper");

        page.fadeOut(200, function ()
        {
            page.hide().load(href + " #pageWrapper", function ()
            {
                page.fadeIn(200);
            });
        });

    }
    });

My problem is that when I click my nav links sometimes it loads with jquery like I want it to but other times it still links it as if I were to click a normal element, despite return false...

When you add new html to your page, your click event handler does not apply as it only applies to the `nav a` links that exist when your code runs. Change to `$(document).on("click", "nav a", function() ..` — freedomn-m, Apr 03 '18 at 09:28

Jquery dynamic page - loading return false method still uses normal href link

0 Answers0