Using ajax-loaded data by html()

Using ajax-loaded data by html()

Hi there, I'm new to jQuery, I red the FAQ and some tutorials.. now I ended up with this:

  1.     $('#food_rate').load('/ajax.php?x=get_food');
  2.     $('#tax_rate').load('/ajax.php?x=get_tax');
  3.     $('#mood').html(function(){
  4.             return ($('#food_rate').html()-$('#tax_rate').html())*10; 
  5.       });

$('#mood').html always contains the value of the values food_rate and tax_rate had before I loaded the new values in. (Before Line 1 and 2 happen)
I already red, about event bubbling and event delegation, but the html-elements fax_rate and food_rate exist from the beginning, and only their innerHTML does change.
So why ain't this working?
thanks