成功響應來自 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();
      }
    });
  }