Question

I have a script that write a iframe into the page.
I want to target a link inside this iframe to have a function.
The problem is:
after the iframe has been written I use this code:

$('#iframe_pin').load(function () {
            $(this).contents().find('a.close').click(function (event) {
                event.preventDefault();
                $('.loaded').fadeOut(fade_time).remove();
            })
        })

and it doesn’t work.
But if I put an alert after the load function, like this:

$('#iframe_pin').load(function () {alert('bla bla');
            $(this).contents().find('a.close').click(function (event) {
                event.preventDefault();
                $('.loaded').fadeOut(fade_time).remove();
            })
        })

it works!

Of course I cannot keep the alert in the code 🙂

Can anyone help me?

Answer 1

from comments you have something like:

<div class="loaded">
    <iframe id="iframe_pin" src="abc.html" width="100%" height="100%">
</div>

so, all you need to do is:

$("#iframe_pin").load(function() {

    // let's get the iframe source
    var iframe = $("#iframe_pin").contents();

    iframe.find("a.close").bind("click", function() {
        $(".loaded").fadeOut('slow', function() {
            // now that the FadeOut is finished, let's remove
            $(".loaded").remove();
        });
        return false; // let's prevent to jump in the click
    });
});

working example at my own space

---

Example 2 by creating the <iframe> on the fly

---

Example 3 by creating the <iframe> on the fly, removing them and re-creating them