Call JQuery Function when using AJAX

Question

We are new to JQuery but have quite a bit of programming experience.

We have a web application that performs load-on-demand AJAX calls. Whenever a user scrolls up or down, it makes small requests to the server to request more data. The AJAX call is made whenever an empty div (each having a unique ID) appears on-screen, then the corresponding data is loaded, so on and so forth.

We realized that none of the JQuery was working because the parent document was loaded before any real data was inserted using AJAX. So the $(document).ready(function() was already called before any AJAX data was inserted into the parent document. We overcame this by creating a JQuery function that called each of the functions and inserted it into each AJAX-called HTML snippet:

AJAX-called HTML:

$(document).ready(function(){

            callBackFx();

});

JQuery Function:

this.callBackFx = function(){ 
        vectorToggle();
                 //list of fxs()...
        atooltip();

};

Which worked, except each time a new div is loaded via AJAX, it calls the JQuery functions each time a new div is loaded, which obviously causes problems. We have tried to pass the id of the parent div to the overall callBackFx function, but haven't gotten it to work.

Any ideas are much appreciated.

Answer 1

Try to bind the ajax call to the 'scroll' event handler, each time the scroll reaches a new div, here you can find an example:

http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

Answer 2

We figured out that we need to pass the div id as a parameter to each of the functions rather than to a single, all-inclusive function.