Question

In regard to the following function, which I’ve rewritten a dozen times over the last hour:

function show_history() {
    $('.job.collapsed').click(function() {
        $(this).removeClass('collapsed');
        $(this).addClass('expanded');
        $(this).children('.bottom').load('expand.php', function(){
            $('.job.expanded').click(function() {
                $(this).removeClass('expanded');
                $(this).addClass('collapsed');
                $(this).children('.bottom').html('');
                $(show_history);
            });
        });
    });
}

Which I initially call as such:

$(document).ready(function() {
    $('#main').load('jobs.php', show_history);
});

The 1st time I click a ‘.job’, 1 request is sent to ‘expand.php’

The 2nd click also sends 1 request to ‘expand.php’, despite the ‘.job’ not having the ‘.collapsed’ class.

The 3rd click sends 2 requests, the 4th sends 3 requests, the 5th sends 6 requests, the 6th sends 9 requests, the 7th sends 18 requests, the 8th sends 27 requests, etc.

I would like it send 1 request when clicking a collapsed job, and no requests when I click an expanded job.

How can I fix this?

EDIT

The solution I used, based on @mblase75’s suggestion:

function show_history() {
    $('.job.collapsed').live('click',function() {
        $(this).removeClass('collapsed');
        $(this).addClass('expanded');
        $(this).children('.bottom').load('expand.php');
    });
    $('.job.expanded').live('click',function() {
        $(this).removeClass('expanded');
        $(this).addClass('collapsed');
        $(this).children('.bottom').html('');
    });
}

Answer 1

Try moving your .click out of the callback and replace it with a .live("click") handler:

   $('.job.expanded').live('click',function() {
        $(this).removeClass('expanded');
        $(this).addClass('collapsed');
        $(this).children('.bottom').html('');
        $(show_history);
   });
   $(this).children('.bottom').load('expand.php');