Проблемы с загрузчиком Ajax

Question

У меня есть несколько ссылок для редактирования, которые удаленно извлекают форму редактирования, которая отображается в оверлее.Чтобы оставить отзыв пользователям, у меня есть диапазон, который заменяет исходную ссылку edit-tester во время звонка.После завершения промежуток удаляется правильно.Проблема в том, что при повторном нажатии на ту же ссылку появляются 2 'думающих' пролета.При повторном нажатии появляются 3 и т. Д.

Может кто-нибудь посоветовать, почему это так и как это исправить, основываясь на приведенном ниже примере кода?

Я, очевидно, хочу, чтобы при нажатии на ссылку появлялся только 1 «думающий» промежуток, а не множители, зависящие от количества нажатий.

Будем весьма благодарны за любые указатели!

$('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();  
   });
});

Мое единственное предположение, что фактический 'мышление' промежуток не удаляется из DOM.Кроме этого, никто не догадывается ...

РЕДАКТИРОВАТЬ: отредактировал первую строку кода выше ... Я забыл изменить его обратно после возиться с ним.

Answer 1

При каждом клике вы привязываете дополнительные копии события отправки к ссылке. Посмотрите, как

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

на самом деле делается каждый раз, когда ссылка нажата? Возможно, вы могли бы переместить этот блок до или после родительской функции, и он будет работать нормально.

Редактировать: чтобы уточнить, похоже, что вы объединяете все свои события в одно выражение. Цепочка в jQuery - это мощно, но не для этого. Не видя больше вашего источника, я не могу предложить конкретную реализацию, но для простого добавления «мыслящего» DIV это сделает работу:

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