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

Question

I am trying to call function upon successful response from ajax call.

Here both functions:

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

This does update #cart_buble div as expected with the number in the cart however doesn't execute waggle function which is responsible for calling css transition effect.

Both functions are working fine seperately.

Answer 1

I think this variable is the problem here. This kind of function declaration can change the data stored in this variable up to where the function is executed.

Try this way

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