Question

I’m trying to build a site that loads another site within it, but with custom css. To do this, I’m loading the page, disabling all attached css, and then firing the function below.

I want it to stop the browser from redirecting on click, read the href, and replace the content of a section with the same content from a new page. This function will then fire on the loaded content as well, allowing me to navigate within the section without actually being redirected.

function linkHijack() {
    $('a').click(function(event) {

      event.preventDefault();
      var link = $(this).attr("href");
      $('div#content').load(link+'div#content', linkHijack());

    });
}

It seems to be working correctly at first, but the function does not work on the newly loaded content. How do I get it to hijack the new links as well?

Answer 1

You will need to use a .live() for older versions of jquery, .delegate() for mid versions and .on() for the newest versions.

This will ensure any new content returned by ajax has their events bubble up.

$('a').live("click", function(event) {

      event.preventDefault();
      var link = $(this).attr("href");
      $('div#content').load(link+'div#content', linkHijack());
});