jquery - load link src into iframe with jquery

Question

I was wondering if it's possible to have jQuery look at a group of links within a div class, and when one of those links are clicked the src of that link will load in the iframe.

I think it would be something like

$(function() {
$('.link_group a').on('click', function(){
   $('iframe#frameID').attr('src', $(this).attr);
});
});

EDIT- my jQuery now looks like this

$(function() {
$('.link_group a').on('click', function(){
$('iframe#frameID').attr('src', $(this).prop('href'));
});
});

HTML

<div class="link_group">
<a href="Link 1.asp">Link 1</a>
<a href="Link 2.asp">Link 2</a>
<a href="Link 3.asp">Link 3</a>
<a href="Link 4.asp">Link 4</a>
</div>

but thats definitely not working..

Would anyone know how to do this properly?

Answer 1

You have to pass a parameter to the attr() method, and also select which attribute:

$(this).attr('href')

Or, more recently in jQuery:

$(this).prop('href');

Also, an id is unique within the document, so unless you use exactly the same script in other pages and use that id on other element types, specifying the iframe is redundant, and potentially slows down your selector.

Answer 2

try:

$(this).attr("href")

or preferably in jQuery 1.6+:

$(this).prop("href")

instead of:

$(this).attr