AjaxStart проблема

Question

Я пытаюсь создать торговый сайт с помощью ajax. Когда пользователь нажимает на изображение «добавить в корзину». Небольшое изображение загрузки будет отображаться рядом с изображением «Добавить в корзину». Первый щелчок работает отлично, и изображение показало, как я ожидал. Однако при втором и последующих щелчках добавляется больше изображений к первому загружаемому изображению (2-й: добавить два загрузочных изображения, 3-й: добавить три изображения. Всего 6 изображений после 3-х нажатий). Я использовал ajaxStop и удалил первое изображение ... Не уверен, что происходит ... Могу воспользоваться помощью. Большое спасибо.

Мой код JavaScript

// add to cart
$(".addToCart").click(function(e){
 $this=$(this);
 $tableId=$this.closest('table').attr('id');


$($this).prev().ajaxStart(function(){
   $("<img class='loader' src='images/loader.gif'>").insertBefore($this);
});


$($this).prev().ajaxStop(function(){
   $($this).prev().remove(); 
});

HTML

<table>
<tr>
   <td width="146" align="right" valign="middle">
<br>
<span id="wasPrice"><?php echo $productPriceWas; ?></span>
<br>

<?php echo "$".$productPrice;?><br>**//I want my image here**<a class="addToCart" href="javascript:void(0);"><img src="images/addToCart.gif" alt="add To Cart"/><a/>     </td>
        </tr>
         </table>

Answer 1

.ajaxStart() - глобальное событие. При каждом щелчке вы связываете другой набор обработчиков событий, что приводит к отображению двух или более загружаемых изображений. Вы можете попробовать использовать привязку события .one(types, function() { ... }), чтобы запускать этот блок кода только один раз за клик.

Однако я бы посоветовал рассмотреть обратные вызовы $.ajax() beforeSend и complete как места для привязки кода для конкретного запроса ajax (в отличие от каждого запроса ajax).

Я обычно использую шаблон примерно так:

$(".addToCart").click(function(e){

   // you need to use "var" to make sure $this is only available inside this function
   var $this=$(this);

   // avoid using $ on variables that aren't jQuery objects (this is just a string)
   var tableId=$this.closest('table').attr('id');

   // insert the element before starting the ajax call
   var $loadingElem = $("<img class='loader' src='images/loader.gif'>");
   $loadingElem.insertBefore($this);

   // call ajax with some data
   $.ajax({
     url: '...', data: {id: tableId}, // ....
     complete: function(xhr, textStatus) {
       // remove the element when the ajax completes
       $loadingElem.remove();
     }
   });
 });

Кроме того, $($this) - потерянный вызов, он просто вернет $this