HTML Breadcrumb Displaying Then Losing Location Once New Page Is Loaded

Question

I have an issue with the breadcrumb on my site.

On page load, the Home is displayed (which is correct).. When i click on a link within my navigation menu, the breadcrumb

Answer 1

There are a couple of errors in your code. First of all, you are forgetting a ); in the following code:

$(function() {
  createBreadcrumbs();      
} ); //HERE!

and you might have forgotten to copy the last } to this question. I've added that one in here. You are attaching a handler to links that are a child of an element with the site-nav class. There is no such thing in your code. Change that to .nav a.

function createBreadcrumbs() {
  $('.nav a').on('click', function() {
    var $this = $(this),
    $bc = $('<div class="item"></div>');

    $this.parents('li').each(function(n, li) {
      var $a = $(li).children('a').clone();
      $bc.prepend(' > ', $a);
    });

    $('.breadcrumb').html( $bc.prepend('<a href="/">Home </a>') );    
    return false;
  });
}

Edit: If you want this to actually display something, you'll need to load the page with ajax and shove the resulting html into the DOM.