Question

我已经创建了一个jQuery函数，在单击时会激活“添加到购物车”按钮，因此它会飞到顶部栏上的购物车图标。我已经克隆了div标签，因为我仍然希望在用户点击一次后可以使用“添加到购物车”按钮，然后我设置了动画功能以删除已经完成后向上飞行的div。

我的问题是，一旦该功能运行一次，它将不会再次运行。例如，如果客户点击“添加到购物车”按钮，然后再决定再次点击该按钮，则该按钮将不会在第二次设置动画。

这是我的JavaScript代码 - 它可能看起来有点过于复杂，但这是由于我正在处理的页面上按钮的位置。

$('.addToCart').click(function(){

    var leftPos = $(this).position().left + $(this).parent().offset().left;
    var existingLeftCSS = $(this).css('margin-left');
    var existingTopCSS = $(this).css('margin-top');
    var leftPos = parseFloat(leftPos) - parseFloat(existingLeftCSS);
    var topPos = $(this).offset().top - $(window).scrollTop()+'px';
    var topPos = parseFloat(topPos) - parseFloat(existingTopCSS);
    var newLeftPos = $('#cartButton').offset().left - parseInt($(this).css('margin-left'));

    setTimeout(function(){$(this).remove();}, 110);
    $(this).clone().appendTo($(this).parent());
    $(this).css('z-index','999');


  $(this)
  .css({
      position:'fixed',
      top: topPos,
      left: leftPos
  })
  .animate({
    top:"40",
    left: newLeftPos

  }, 500, function(){
    $(this).remove();
  });


});

或者对于我的问题的简化版本，请参阅此jsfiddle： http://jsfiddle.net/jxbbm/

Answer 1

我认为你应该使用事件委托，因为：

$('.productBox').on('click', '.addToCart', function() {
  ...
});

Answer 2

将代码的第一行更改为

$('.productBox').on('click', '.addToCart', function(){

Answer 3

替换$（this）.clone（）... for

var clone = $(this).clone(); 
    $(clone).appendTo($(this).parent()); 
    $(clone).css('z-index','999'); 
    $(clone).css({
              position:'fixed',
              top: topPos,
              left: leftPos   })
    .animate({
            top:"8",
            left: newLeftPos   
    }, 500, function(){
              $(this).remove();   
    });

动画后没有删除jQuery元素

3 个答案: