multiple div ajax load
<p>I have multiple divs in a page whose content gets loaded via ajax. I would like to show a loading gif that does the following, basically ajax_load_comments and pics are divs with animated gif backgrounds (in comments and pics container respectively), that show up on ajaxStart and hide on ajacstop.</p>

<p>Problem is they both show up regardless which container is being updated. How can I bind them to ajaxStart of a particular container? I like the one time binding in a main js file, rather than doing multiple bindings in different pages.</p>

<pre><code> $("#ajax_load_pics, #ajax_load_comments").bind("ajaxStart", function(){
        $(this).fadeIn('slow');
        $(this).parent().animate({
            opacity: 0.3
        }, 'slow', function() {
            // Animation complete.
            });

    }).bind("ajaxStop", function(){
        $(this).fadeOut('slow');
        $(this).parent().animate({
            opacity: 1
        }, 'slow', function() {
            // Animation complete.
            });
    });
</code></pre>

<p>Ok, well here is what I am doing now, but I don't really see the loading div.</p>

<pre><code> $('.pagination a').live("click", function () {
        showLoad($(this).parent());
       /* $.get(this.href, null, function (data) {
            $('#com_prog_loading').fadeOut('slow');
            elem.remove($('#com_prog_loading'));
        }, 'script');*/
        $.get(this.href, null, null, 'script');
        return false;
    });

function showLoad(elem) {
    elem.parent().prepend("&lt;div id='com_prog_loading'&gt;&lt;/div&gt;");
    $('#com_prog_loading').fadeIn('slow');
}

function hideLoad() {


}
</code></pre>
