Ajax loader handling problems

I have a number of edit links which remotely pull on an edit form, which is brought up in an overlay. In order to give feedback to users I have a span which replaces the original edit-tester link while the call is being made. Upon completion the span is removed correctly. The problem is, when clicking on the same link again 2 'thinking' spans appear. When clicked again 3 appear and so on.

Could anyone advise on why this is and how to fix it based on the sample code below?

I obviously want only 1 'thinking' span to appear whenever the link is pressed, n开发者_StackOverflowot multiplicities dependent on the number of clicks.

Any pointers would be greatly appreciated!

$('a.edit-tester').click(function() {
  $(this).bind('ajax:beforeSend', function() {
    $(this).toggle();
    $(this).after('<span class="thinking">Thinking</span>');
  }).bind('ajax:success', function() {
   $('span.thinking').remove();
    $(this).toggle(); 
}).bind('ajax:error', function(){
     $('span.thinking').remove();
     $(this).toggle();  
   });
});

My only guess is that the actual 'thinking' span is not being removed from the DOM. Other than that it's anybody's guess...

EDIT: Edited the first line of the code above... I forgot to change it back after messing around with it.

You're binding additional copies of the send event to the link with each click. See how

 $(this).bind('ajax:beforeSend', function() {...}

is actually done each time the link is clicked? You could probably move that block to before or after the parent function and it'd work fine.

Edit: To clarify, it appears that you're chaining all your events into a single expression. Chaining in jQuery is powerful, but this isn't what it's for. Without seeing more of your source I can't suggest a specific implementation, but for just adding the "thinking" DIV this will do the job:

$('a.edit-tester').live('click', function() {
    $(this).toggle();
    $(this).after('<span class="thinking">Thinking</span>');
}