Question

I have seen something really cool at Yippy

They are loading the url in to an iframe for a quick view. I would like to do the same for my website. I’m using the bing API, example: JsFiddle

So I appended an iframe and a div to trigger the load event:

<div class="blok"></div>
<iframe class="ifram" src="" width="100" height="100"></iframe>

And I tried this for the event:

$(".block").click(function () { 

$(".ifram").attr("src", (".desc a", this).text() );
});

Doesn’t work.

Answer 1

There’s about 6 things wrong:

1. You’re using .click(), but the results are added dynamically, therefore you need to use a live handler such as .on()
2. The element is .blok in the html, but you’re binding the event to .block
3. You’re trying to set the src of every .ifram element
4. You forgot the $ in front of your selector
5. You’re passing your selector a context of the element itself, but the anchor you want to find is inside a sibling
6. You’re accessing the text of the anchor, not the href.

The following code should do what you want:

$("body").on('click', '.blok', function () {
    $(this).siblings(".ifram").attr("src", $(this).siblings('p.desc').find('a').attr('href') );
});

jsFiddle: http://jsfiddle.net/aHCT5/18/