<h1>Opening Links in a New Window</h1>
<p>This link will open in a new window: <a href ="http://packtpub.com">New Window!</a></p>
<p>This link will not: <a href ="http://packtpub.com">Same Window!</a></p>

This is just a heading and two simple paragraphs, each with a link — one that should open in a new window and one that won't.

If we were using CSS, we could assign the link an ID or a class. An ID would be pretty limiting, as an ID must be unique on a page — it would only apply to this one particular link. A class would let us style any link that opens in a new window, so that's what we're going to use. Add a class to the link that should open in a new window as follows:

<a href="http://packtpub.com" class="new-window">New Window!</a>

$(document).ready(function(){
});
function externalLinks() {
}

Here we've created a new function and named it externalLinks as that's a name that makes sense for opening links in new windows. It's always helpful to give your JavaScript functions and variables names that will help you remember what they do.

function externalLinks() {
$('a.new-window').bind('click', function() {
});
}

This bit of code binds a function to our link — when our link is clicked, any code we write inside this new function will be called. But so far, our function is empty and doesn't actually do anything.

function externalLinks() {
$('a.new-window').bind('click', function() {
var location = $(this).attr('href'),
});
}

Let's examine this new line of code one bit at a time. First, we've declared a new variable named location. As you remember, a variable is just a container. So we've got a new empty container, so now let's look at what we've put inside our container.

$(this) is the jQuery way of referring to the jQuery object that we're currently working with. In this case, we're selecting all links with a class of new-window and we've attached this function to be called whenever a site visitor clicks the link. When a site visitor clicks a link, we want to examine the link that was clicked to get the location of where the link is going. A simple and quick way of referring to the current link is to use $(this).

Next we use the attr() method to get an attribute of the link. The location where a link is heading is contained in the href attribute, so we pass href to the attr() method.

So our container that we've named location now contains the URL where the link is pointing, or in this particular case, http://packtpub.com.

function externalLinks() {
$('a.new-window').bind('click', function() {
var location = $(this).attr('href'),
window.open(location);
});
}

window is a global object in JavaScript that is always available to us. The window object has an open() method, and we just have to pass a location to that method so that the browser knows what location to open in a new window.

We would like this function to fire up, find all the links with the class new-window, and bind our new window function to them as soon as the page is loaded in the browser window. That way, our links that should open in new windows will be ready to fire off a new window as soon as our site visitor clicks on one of them.

We just have to add a line inside our document ready statement to call our function:

$(document).ready(function(){
externalLinks();
});
function externalLinks() {
$('a.new-window').bind('click', function() {
var location = $(this).attr('href'),
window.open(location);
});
}

This new bit of code will call our externalLinks function as soon as the page loads up in the browser.

function externalLinks() {
$('a.new-window').bind('click', function(e) {
var location = $(this).attr('href'),
window.open(location);
e.preventDefault();
});
}

You'll notice that the function we've attached to the click action on the link now has an e inside the parentheses. This is a parameter that we're passing to this function. In this case e represents the click event of the link.

The line of code we add to the function is:

e.preventDefault();

This tells the browser to stop the default behavior of the link. If you reload the page in your browser and click on the link, you'll see that it correctly opens the destination page in a new window, and it no longer opens the link in the current window:

<p>This paragraph will open in a new window too: <a href="http://nataliemac.com" class="new-window">New Window!</a></p>

Be sure to add the new-window class to your link.