jquery function on ajax loaded content

Question

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());
});

I do not see where ajax comes into play here, please elaborate. Else $(document).ready(...) might be your simplest solution. — zsawyer
– zsawyer, Commented Jun 1, 2013 at 19:04
All of these elements (slider img, slide, inner) they are all loading in with ajax. — beliy333
– beliy333, Commented Jun 1, 2013 at 20:05
Maybe instead of onclick register this function with (or execute it from) the success method of your ajax call? — zsawyer
– zsawyer, Commented Jun 1, 2013 at 20:11
I updated the post with the load in call to show you where I'm loading in the content. — beliy333
– beliy333, Commented Jun 1, 2013 at 20:12
Can you explain a bit more how I would register it with the success? I'm new to jQuery. Trying to learn :) — beliy333
– beliy333, Commented Jun 1, 2013 at 20:14

Sushanth -- · Accepted Answer · 2013-06-01 19:01:41Z

1

Trigger the click event explicitly

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

answered Jun 1, 2013 at 19:01

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zsawyer · Accepted Answer · 2013-06-01 20:59:25Z

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

Jan. · Accepted Answer · 2013-06-01 19:06:48Z

0

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

answered Jun 1, 2013 at 19:06

Jan.

2,00516 silver badges17 bronze badges

Collectives™ on Stack Overflow

jquery function on ajax loaded content

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related