jQuery - use javascript after loading content with Ajax

Question

I'd like to load the flexslider gallery with jQuery when an anchor element is been clicked. The gallery shall be loaded in div#slider-loader

The problem is that the HTML is loaded properly, but the Javascript seems not to affect the injected elements even though I read that in this cases I shall use .on().

$(document).on('click', '.cliccami' , function() {
        var href = $(this).attr('href');
        $('#slider-loader').load(href);
        return false;
});

Thank you in advance!

--

use a call back function to preform action whaen the load is completed like so

Sweet! it worked! although with such solution the .on() event become useless. Now I came up with this and it works:

$('.cliccami').click(function() {
    var href = $(this).attr('href');
    var gallery_height = $('.flexslider').css('height');
    $('#slider-loader').hide().fadeIn('slow', 'swing').load(href , function(){
        $('.flexslider').flexslider({
            animation: "slide"
        });

    })
    return false;
});

The only problem is the injection of the code is very scattering. I would like to make the div container '#slider-loader' adjust its height according to the '.flexslider' height with a smooth animation.

What I've tried to do is:

$(document).ready(function(){
    $('#slider-loader').hide();
});


$(document).on( 'click', '.cliccami', function() {

    var href = $(this).attr('href');
    var gallery_height = $('.flex-viewport').css('height');

    $('#slider-loader').load(href , function(){
        $('.flexslider').flexslider({
                animation: "slide"
        });
        $('#slider-loader').css('height' , gallery_height);
        $('#slider-loader').slideDown(10000);
    });
    return false;
});

The problem is that once i click the anchor element the #slider-container start to slideDown showing its content but it dosen't do it for the whole .flexslider height which I've set as variable and gave to him with the .css() method. It slideDown for few pixel and then it suddenly became of the entire .flexslider height.

Answer 1

use a call back function to preform action whaen the load is completed like so

$(document).on('click', '.cliccami' , function() {
        var href = $(this).attr('href');
        $('#slider-loader').load(href , function(){
                                  // some thing to happen when loading is done
                                });
        return false;
});