Question

I’m trying to prevent default links, because I’m dynamically loading pages into divs with jQuery, and the href for each like is just the name before the page (e.g. href=home, and fixing to load to home.php in code below).

//initialize home page as active on load up and deactivate link
var activePage = $('a[href$="home"]');
var activePageHref = activePage.attr('href');
activePage.attr('href', '#');

$('a').click(function(e) {
    e.preventDefault();
    //set the page clicked on
    var page = $(this).attr('href');
    //check to see if there are any extras to url for php
    var pageCheck = page.split('?');   
    //sort page type
    if (pageType == null) {
        //dynamically load the page in div bodycontent
        $('#bodycontent').load(page + '.php');
    } else {
        $('#bodycontent').load(page + '.php?' + pageCheck[1]);
    }
    //pull up last disabled link for navigation
    var setOld = $('a[href$="' + activePageHref + '"]');
    setOld.attr('href', '' + activePageHref + '');
    //set the new disabled link for navigation
    activePage = page;
    //make link inactive
    $(this).attr('href', '#');
});

It was ok with return false at the end until I added MORE things I needed to happen in the click event function, but to be exact, this part:

//pull up last disabled link for navigation
    var setOld = $('a[href$="' + activePageHref + '"]');
    setOld.attr('href', '' + activePageHref + '');
    //set the new disabled link for navigation
    activePage = page;
    //make link inactive
    $(this).attr('href', '#');

Now the e.preventDefault();, which is from what I understand the correct way of doing what I need to happen, is stopping the entire thing from firing on any links. I’m stuck. I just need to stop default action, and use the function I’ve built with the extras at the end I’ve added to make my navigation pretty.

Also to add, I do have a hover function tied to the ul of this navigation, but didn’t include it as it shouldn’t causing an issue, but I can put it in here if needed. That is the only other thing in this document ready function.

Answer 1

Updated:

Since you change the disabled link’s href initially, the attribute-contains selector won’t be able to find it again later on to activate it. I would suggest doing this a little bit differently.

You can capture the entire ‘disabled link’ functionality by using classes. If you add a class to links which should be “disabled” you can prevent the browser from following only links with that specified class.

When you click on an “enabled link”, follow it then make it disabled. Then, enable all other links.

$('a').click(function() {
    $(this).addClass('disabledLink');
    $('a').not(this).removeClass('disabledLink');
}

Then, set up an event listener for the whole document which prevents the default action on links with a certain class.

$(document).on('click', 'a.disabledLink', function(e) {
    e.preventDefault();
}

This should achieve what you want as is (i.e. it would replace your entire ‘click’ handler above). Note with this the href will never be changed to ‘#’.

---

Otherwise: just cache the link itself along with its href

//pull up last disabled link for navigation
activePage.attr('href', '' + activePageHref + '');

//set the new disabled link for navigation
activePage = $(this);
activePageHref = $(this).attr('href');

//make link inactive
$(this).attr('href', '#');

---

You have a syntax error which is causing the JS engine to halt:

//pull up last disabled link for navigation
$('a[href$="' + activePageHref + '"]').attr('href', '' + activePageHref + '');

//set the new disabled link for navigation
activePage = page.attr('href');
/* THIS HERE RETURNS A STRING SO YOU CHANGE activePage to a string. */

// Should probably be:
activePageHref = page.attr('href');

//make link inactive
activePage.attr('href', '#');

Befor you invoke this method you set activePage to be a string, which has no method .attr() so it throws an error and execution of the function stops.