CODEWITHSUNDEEP
jqueryhtmlimageexternal
Tasos
Tasos

Reputation: 1642

Target external HTML elements that loads into div from main file

I have a main.html that loads external HTML (which contains images) into a div(#external). How can I target these images from the main file? I need to bind a load function into them that checks if the image is done loading so I can animate it. If I bind the load function directly on the external HTML it works but not sure how I can do the same thing but from the main file.

jquery:

$(".iframe").on("click", function(e) {
        e.preventDefault();
        var $mylink = $(this).attr('href');
        $("#external").load($mylink)});
});

html:

<a class="iframe" href="pages/page.html">Test</a>

Upvotes: 1

Views: 716

Answers (1)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try using the call back function, we cant rely on event delegation in this context since load event wont bubble,

$(".iframe").on("click", function(e) {
    e.preventDefault();
    var $mylink = $(this).attr('href');
    $("#external").load($mylink , function() {
       $("#external img").load(function(){ 
          //code 
       });
    });
});

Upvotes: 1

Related Questions