Question

Ok, I’ve been trying to get this to work for a few days now. I have a thumbnail scroller and it works fine when the window is loaded with the provide code below. But after the ajax call it does not.

this is the function loaded initially.

    (function($){
     window.onload=function(){ 
    $("#tS2").thumbnailScroller({ 
        scrollerType:"clickButtons", 
        scrollerOrientation:"horizontal", 
        scrollSpeed:2, 
        scrollEasing:"easeOutCirc", 
        scrollEasingAmount:800, 
        acceleration:4, 
        scrollSpeed:800, 
        noScrollCenterSpace:10, 
        autoScrolling:0, 
        autoScrollingSpeed:2000, 
        autoScrollingEasing:"easeInOutQuad", 
        autoScrollingDelay:500 
    });
}
})(jQuery);

I tried adding this to part below in my ajax function call back but still doesn’t work.

$("#tS2").thumbnailScroller({ 
            scrollerType:"clickButtons", 
            scrollerOrientation:"horizontal", 
            scrollSpeed:2, 
            scrollEasing:"easeOutCirc", 
            scrollEasingAmount:800, 
            acceleration:4, 
            scrollSpeed:800, 
            noScrollCenterSpace:10, 
            autoScrolling:0, 
            autoScrollingSpeed:2000, 
            autoScrollingEasing:"easeInOutQuad", 
            autoScrollingDelay:500 
        });
    }

How do I reinitialize this or is there some way to use On? The problem is the ID/element is not loaded until the ajax call is done, then I need to reattach the thumbnailScoller function. BTW I do a click to do the ajax call which already uses .On but placing this function in there doesn’t work. Any help is welcomed.

Edit: Here is the ajax call.

$.ajax({
            type: "POST",
            url: "/ajax.php",
            data: {"pho_id": pho_id, "alb_id": alb_id},
            success: function(response){
                $("#phoajax").html(response);
                $("#tS2").thumbnailScroller({ 
                scrollerType:"clickButtons", 
                scrollerOrientation:"horizontal", 
                scrollSpeed:2, 
                scrollEasing:"easeOutCirc", 
                scrollEasingAmount:800, 
                acceleration:4, 
                scrollSpeed:800, 
                noScrollCenterSpace:10, 
                autoScrolling:0, 
                autoScrollingSpeed:2000, 
                autoScrollingEasing:"easeInOutQuad", 
                autoScrollingDelay:500 
                });
                pslide(alb_id);
            }
        })

Answer 1

you have to call it in the callback function of the ajax call, not after it:

$.post("some_url", {var: var1 .... etc}, function(data){ //the same with $.ajax, $.get
     //HERE !
});

the callback function is executed after your ajax call is done, if you modified or added any DOM elements with the ajax call you need to apply the jquery functions after that modification.