CODEWITHSUNDEEP
jqueryajax
beliy333
beliy333

Reputation: 479

jquery function on ajax loaded content

How do I select objects and apply functions to them if they are loaded in with Ajax?

This code works, but I would like this code to run without the click event. So it runs automatically.

$(document).on("click",".button",function(e){

    var imgcount = $('.slider img').length;
    var slidesize = 100 / imgcount
    var innersize = 100 * imgcount

    $('.slider img').wrap('<div class="slide" />');
    $('.slide').wrapAll('<div class="inner" />');
    $('.inner').wrapAll('<div class="overflow" />');
    $('.slide').css('width', slidesize + '%');
    $('.inner').css('width', innersize + '%');

    });

This is how I load in my content

$('.work-item-hover').click(function(){

    var toLoad = $(this).attr('href')+' #content-post > *';
    $('#content-post').slideUp('normal',loadContent);
    $('#load').remove();
    $('.content-post-wrap').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#content-post').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
        $(document).ajaxComplete(function(){
    $('#content-post').slideDown('slow',hideLoader());
});

Upvotes: 0

Views: 315

Answers (3)

zsawyer
zsawyer

Reputation: 1844

In your case the showNewContent() is your success method. You could insert your code there (or wrap it in a another named function for convenience). 

function showNewContent() {       

    var imgcount = $('.slider img').length;
    var slidesize = 100 / imgcount
    var innersize = 100 * imgcount

    $('.slider img').wrap('<div class="slide" />');
    $('.slide').wrapAll('<div class="inner" />');
    $('.inner').wrapAll('<div class="overflow" />');
    $('.slide').css('width', slidesize + '%');
    $('.inner').css('width', innersize + '%');

    $('#content-post').slideDown('slow',hideLoader());
}

Note that I removed the call to .ajaxComplete() as it is imho redundant since showNewContent() is registered to .load() as the complete handler here .load(toLoad,'',showNewContent()) (and only for this single request). With your original call you register for all ajax requests.

sandboxed test

Upvotes: 0

Jan.
Jan.

Reputation: 1995

$(document).ready(function(){}); - other than that, make sure your call $('element').click(); in your success function of any AJAX request.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

Trigger the click event explicitly

    $('.slide').css('width', slidesize + '%');
    $('.inner').css('width', innersize + '%');
}).click();

Upvotes: 1

Related Questions