Question

我正在尝试使用ajax构建购物网站。当用户点击“添加到购物车”图像时。加载图像将显示在“添加到购物车图像”旁边。第一次点击工作正常，图像显示我的预期。但是，第二次和随后的点击会在第一个加载图像上添加更多图像（第二个：添加两个加载图像，第三个：添加三个图像... 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()是一项全球性活动。每次单击都会绑定另一组事件处理程序，这会导致显示2个或更多加载图像。您可以尝试使用.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

AjaxStart问题

1 个答案: