javascript - 动画后未删除 jQuery 元素

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() {
  ...
});