成功响应来自 Ajax 调用的数据后，还要处理额外的 function

Question

在 ajax 呼叫成功响应后，我试图呼叫 function。

这里有两个功能：

      function waggle() {
       var element = $(this);
          var tmpClass = element.attr('class');
          element.removeClass();
          setTimeout(function() {
            element.offsetWidth = element.offsetWidth;
            element.addClass(tmpClass).addClass('start-now');
          }, 10);
    }

    function auto_load(){
    $.ajax({
      type: 'POST',
      data: {room_id:'$r_room_id',site_id:'$r_site_id'},
      url: 'cart_counter.php',
      success: function(data){
        $('#cart_buble').html(data);
        waggle();
      }
    });
  }

这确实使用购物车中的数字按预期更新了#cart_buble div，但是不会执行waggle function ，它负责调用 css 过渡效果。

这两个功能分别运行良好。

Answer 1

我认为this变量是这里的问题。 这种 function 声明可以将存储在this变量中的数据更改为执行 function 的位置。

试试这个方法

function waggle() {
       var element = $(...); // <--- Query your element instead of using `this`
          var tmpClass = element.attr('class');
          element.removeClass();
          setTimeout(function() {
            element.offsetWidth = element.offsetWidth;
            element.addClass(tmpClass).addClass('start-now');
          }, 10);
    }

    function auto_load(){
    $.ajax({
      type: 'POST',
      data: {room_id:'$r_room_id',site_id:'$r_site_id'},
      url: 'cart_counter.php',
      success: function(data){
        $('#cart_buble').html(data);
        waggle();
      }
    });
  }