Open link in new window with Jquery

Question

Hi. I am trying to open a few links in a new window using Jquery rather than _blank so my html remains valid. My code looks like this:

$(document).ready(function() {
    $('a[id="external-url"]').click(function(){
        $(this).attr('target','_blank');
    });
});

This works just fine except when the link is contained within html I have placed on the page using the Jquery load() method. Can anyone explain why and please help with a solution?

Answer 1

Use .live()

$('a[id="external-url"]').live("click", function(){
        $(this).attr('target','_blank');
    });

Your code will bind click event to elements that are available at the page load and not to dynamically created elements. Live will bind events to elements that are dynamically created also.

Answer 2

$(function(){
    $('a[id="external-url"]').click(function(){
        window.open(this.href);
        return false;
    });
});

http://snipplr.com/view/4626/jquery-snip--open-link-in-new-window/

Answer 3

This will work:

$('a#external-url').live('click', function(){
  $(this).attr('target','_blank');
});

However, IDs should be unique, if you're loading more than 1, they need to have a class instead, like this:

<a href="http://google.com" class="exteral-url">Google</a>

And jQuery like this:

$('a.external-url').live('click', function(){
  $(this).attr('target','_blank');
});

The standards compliant way would be:

$('a.external-url').live('click', function(e){
  window.open(this.href);
  e.preventDefault(); //or return false;
});