title: Recursive ajax call
body: <p>In regard to the following function, which I've rewritten a dozen times over the last hour:</p>
  
  <pre><code>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);
              });
          });
      });
  }
  </code></pre>
  
  <p>Which I initially call as such:</p>
  
  <pre><code>$(document).ready(function() {
      $('#main').load('jobs.php', show_history);
  });
  </code></pre>
  
  <p>The 1st time I click a '.job', 1 request is sent to 'expand.php'</p>
  
  <p>The 2nd click also sends 1 request to 'expand.php', despite the '.job' not having the '.collapsed' class.</p>
  
  <p>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.</p>
  
  <p>I would like it send 1 request when clicking a collapsed job, and no requests when I click an expanded job.</p>
  
  <p>How can I fix this?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The solution I used, based on @mblase75's suggestion:</p>
  
  <pre><code>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('');
      });
  }
  </code></pre>