1

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, not 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.

1 Answer 1

1

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>');
}
4
  • Ah yes, you're right, there was no reason to bind the function after a click was performed. I removed the .click call and it all works gravy now. Thanks a lot!
    – shyvy88
    Jul 5, 2011 at 23:11
  • No problem. I made the same mistake when I started with jQuery - it's especially easy considering how strongly the use of chaining is pushed in the jQuery docs, they're very proud of it. ;) Coincidentally, if I've helped you it's polite to vote up the post in addition to accepting it, although this isn't required. In any case, welcome to Stack Overflow. Jul 5, 2011 at 23:16
  • I would've voted your reply up, but it says I have to have at least 15 rep to do it... I'm currently on 5. I'll vote this answer up when I get the rep. :) Thx for the welcome! :)
    – shyvy88
    Jul 5, 2011 at 23:19
  • Oh, don't worry about it. Doesn't make much difference. Good luck with your application. Jul 5, 2011 at 23:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.