Appel ajax récursif

Question

En ce qui concerne la fonction suivante, que j'ai réécrite une douzaine de fois au cours de la dernière heure :

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

Que j'appelle initialement comme tel :

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

La première fois que je clique sur un ".job", une requête est envoyée à "expand.php".

Le deuxième clic envoie également une requête à 'expand.php', bien que le ".job" ne possède pas la classe ".collapsed".

Le 3e clic envoie 2 demandes, le 4e envoie 3 demandes, le 5e envoie 6 demandes, le 6e envoie 9 demandes, le 7e envoie 18 demandes, le 8e envoie 27 demandes, etc.

Je voudrais qu'il envoie une demande lorsque je clique sur une tâche réduite, et aucune demande lorsque je clique sur une tâche développée.

Comment puis-je réparer cela ?

EDIT

La solution que j'ai utilisée, basée sur la suggestion de @mblase75 :

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