jQuery .load() html content and execute script

Question

I have the following functions in my document

jQuery(document).ready(function() {
jQuery('body').on('click', 'a.menu', function () { 
        var target = jQuery(this).attr('href');
    jQuery('#container').load(target+' #content');
        return false;
    });

$("a.group").fancybox();

});

The first one replaces the container with the href of the menu link. The corresponding subpages are actually plain divs but could be complete html (if necessary).

The second one calls a fancybox gallery on the selected elements.

How do i get this $("a.group").fancybox() to be executed, when the subpages are loaded?

Many thx in advance, mart05

score 1 · Answer 1 · answered Sep 12 '13 at 08:19

1

You can use the complete callback feature in .loads.

jQuery('#container').load(target+' #content', function(){
    // this will run when .load has completed loading content
    $("a.group").fancybox();
});

answered Sep 12 '13 at 08:19

AlexCheuk

5,595
6
30
35

score 1 · Accepted Answer · answered Sep 12 '13 at 08:20

1

Load has a callback function. so execute the fancybox in this:

jQuery('#container').load(target+' #content', function() {
              $("a.group").fancybox();
          });

answered Sep 12 '13 at 08:20

Liam

27,717
28
128
190

jQuery .load() html content and execute script

2 Answers2

Linked