php - AjaxStart 问题

Question

我正在尝试使用 ajax 构建一个购物网站。当用户单击“添加到购物车”图像时。小加载图像将显示在“添加到购物车”图像旁边。第一次点击效果很好，图像显示如我所料。但是，第二次和随后的点击会在第一个加载图像上附加更多图像(第 2 次:添加两个加载图像，第 3 次:添加 3 个图像..3 次点击后总共 6 张图像)。我确实使用了 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()是一个全局性事件。每次单击都会绑定(bind)另一组事件处理程序，这会导致显示 2 个或更多加载图像。您可以尝试使用 .one(types, function() { ... })事件绑定(bind)，每次点击仅触发该代码块一次。

但是，我建议查看 $.ajax()回调 beforeSend 和 complete 作为为特定 ajax 请求(而不是每个 ajax 请求)绑定(bind)代码的地方。

我通常使用这样的模式:

$(".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