How can I stop jQuery functions interfering with each other?

Question

I have two separate (but similar) bits of jQuery code. They both work, but interfere with each other. How do I properly format these functions to be unique and stop them effecting each other.

Code block 1:

 $('#share-email').click(function(e) {
     e.preventDefault();
     $("#socialbox-" + $(this).attr('rel')).load('<?php echo site_url();?>club/sendtofriend/' + $(this).attr('rel'));
 return false;
 });
 $().ajaxSend(function(r,s){
  $(".social-share-container").fadeOut('fast');  
 });
 $().ajaxStop(function(r,s){
  $(".social-share-container").fadeIn('fast');
 });

Code block 2:

 $('.djlink').click(function(e) {
     e.preventDefault();
     $("#djinfo").load($(this).attr('href'), Cufon.refresh);
 return false;
 });
 $().ajaxSend(function(r,s){
  $("#djinfo").fadeOut('fast');  
 });
 $().ajaxStop(function(r,s){
  $("#djinfo").fadeIn('fast');
 });

The part of the code that appears to be overlapping is the ajax send/stop part.

Answer 1

If I'm correctly guessing what you're trying to do, something like this should solve it:

    $('#share-email').click(function(e) {
        e.preventDefault();
        $("#socialbox-" + $(this).attr('rel')).fadeOut('fast').load('<?php echo site_url();?>club/sendtofriend/' + $(this).attr('rel'), function() {
            $(this).fadeIn('fast')
        });
        return false;
    });


    $('.djlink').click(function(e) {
        e.preventDefault();
        $("#djinfo").fadeOut('fast').load($(this).attr('href'), function() {
            Cufon.refresh();
            $(this).fadeIn('fast');
        });
        return false;
    });