title: jQuery overwrite .click event within click
body: <p>I have these functions:</p>
  
  <pre><code>TargetWorksheet.toggle_child_locations = function(id){
    $("#location-children-"+id).slideToggle("slow"); 
  }
  
  TargetWorksheet.get_child_locations = function(id, lvl){
    //Ajax grab all children and targets, and display children
    $.get('child_locations',{ location_id: id, level: lvl}, function(data){
      $("#location-children-"+id).append(data);
      TargetWorksheet.toggle_child_locations(id);
    });
  
    //Change onClick to just toggle since child data will now be loaded
    $("#location-toggle-"+id).click(function(){
      TargetWorksheet.toggle_child_locations(id);
    });
  }
  </code></pre>
  
  <p>and this call:</p>
  
  <pre><code>$(function(){
    TargetWorksheet.toggle_child_locations(2);
    $("#location-toggle-2").click(function(){
      TargetWorksheet.get_child_locations(2,1);
    });
  });
  </code></pre>
  
  <p>So I attach a click event to my '+' link (#location-toggle-2), which toggles child data.  On first click, I want to do an ajax call to retrieve the child data, but then i just want to overwrite the .click on the #location-toggle-2 so that it now just toggles, and doesn't make the ajax call.  The above code doesn't work, it doesn't seem to overwrite the .click, and makes the ajax call each time.</p>
  
  <p>Does anyone know how I can overwrite the .click event of an item?  I also tried
  <code>$("#location-toggle-"+id).click(TargetWorksheet.toggle_child_locations(id));</code>
  And it just kept toggling over and over recursively for some reason.</p>
  
  <p>Thoughts?</p>