Question

I am using following function to load the page. I have loads of links and can’t add to all links.

function LoadPage(url) {
  $("#canvas").load(url);
}

I want a function which will get all <a> tags href value and add this function to all links just like following:

var oP  = document.getElementsByTagName("a"),
    ctr = 0
;

while(ctr < oP.length) {
  var oldHref = document.getElementsByTagName("a")[ctr].href;

  document.getElementsByTagName("a")[ctr].href = "javascript:loadPage('" + oldHref + "');";
  ctr++;
}

I want to add to all links but not to “INDEX.HTML”.

Answer 1

Something like this:

// select all links
$('a')
  // check that the pathname component of href doesn't end with "/index.html"
  .filter(function() {
    return !this.href.pathname.match( /\/index\.html$/ );
    // // or you may want to filter out "/index.html" AND "/", e.g.:
    // return !this.href.pathname.match( /\/(index\.html)?$/i )
  }) 
  // add a click event handler that calls LoadPage and prevents following the link
  .click(function(e) {
    e.preventDefault();
    LoadPage(this.href);
  });

Since you’re dynamically loading sections of the page, you’ll need to set up event delegation instead. Exactly how you go about doing this depends on the version of jQuery you’re using, but you’ll be using either the .on() (jQuery 1.7+) or .delegate() (prior to jQuery 1.7) functions. The .on() example would look something like this:

$('body').on('click', 'a', function(e) {
    if(!this.href.pathname.match( /\/index\.html$/ )) {
        e.preventDefault();
        LoadPage(this.href);
    }
});