0

I load different types of content through AJAX on my website.

I have a javascript function that will decide whether to open the link in an iframe or new tab based on the URL. But the question is how do I make all links call that javascript function?

I tried:

<base target= processurl()/>

Any ideas?

Thanks

EDIT: The JQUERY method works great. But it only works for one link? When I click a link the first time, it calls the function correctly. But any other links I click on after that, nothing happens.

1
  • 1
    if you have a comment for the answer, leave it under the answer by clicking "add comment" Commented Jan 27, 2012 at 0:10

2 Answers 2

4

using jQuery < 1.7:

$( 'a' ).live( 'click', function( ev ){
    ev.preventDefault(); // stop normal click on link

    // do stuff
} );

Note that jQuery 1.7 prefers the use of .on instead of .live:

$( document ).on( 'click', 'a', function( ev ){
    ....
} );
Sign up to request clarification or add additional context in comments.

Comments

1

There are (at least) two ways you could approach this (depending on how it fits in with your Ajax code):

  1. Handle all clicks on the page with a common function that cancels the default click navigation and then subsitutes its own to load in iframe, new window, etc.
  2. Process all links on the page when the page loads, setting the target attribute as appropriate.

So the first way:

$(document).on("click", "a", function(e) {
   // stop default navigation
   e.preventDefault();

   // 'this' is the particular 'a' that was clicked
   var url = this.href;

   // process url somehow as desired to decide whether to open it
   // in new window, or iframe or to replace current page
});

Noting that the .on() method applies from jQuery version >= 1.7, so for older jQuery use the .delegate() method or for really old jQuery use the .live() method.

The second way (assumes links all exist when page is first loaded):

$(document).ready(function() {
    $("a").each(function() {
        var url = this.href;

        // process url somehow and set the target attribute as appropriate
        // e.g. for a new window
        this.target = "_blank";
        // or for an iframe
        this.target = "nameofiframe"
        // etc.
    });
});

5 Comments

There's no difference between live and delegate in this context
@cwolves - True, but I figure the sooner I get out of the habit of using live() the less I'll have to worry if/when it is completely removed in a future version of jQuery. (I'm still using delegate() though: as it happens my current project is stuck on jQuery 1.4.4, for reasons nobody can explain though I'm not allowed to change it.)
still the same problem with method one. it works once and doesn't work again :( what i mean is the first link i click, the iframe loads properly but after that none of the links i click work.
Are you talking about links in the newly loaded iframe not working? Does it matter which link you click first? I think you might have to provide a demo (perhaps on jsfiddle.net) and/or show your html.
its a popup iframe called shadow box. i want all links to open in the shadow box. so the first link i click on the main web page opens correctly with the shadow box but after I close the shadow box, none of the links in the main web page works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.