檢測Ajax內容加載，以便在Jquery中觸發'加載'事件

Question

我使用下面的代碼來檢測加載時的用戶屏幕分辨率，並相應地調整容器類的大小並進行更改。因此，允許我爲該容器中的元素指定不同的CSS。

當網頁上的所有內容都完全刷新時，此功能非常有用。但是，如果我通過ajax加載新內容，它將無法工作，因爲此代碼只能綁定到「加載」和「調整大小」。

這最終以我不得不重新調整瀏覽器大小，以便將所需的類更改應用於容器。

有沒有辦法讓它檢測到ajax內容的負載並相應地觸發？

$(window).bind('resize load', function(e) { 
      // get browser width 
      var browserWidth = $(document).width(); 

      // search for the layout's container to inject the class'es 
      var containerDiv = settings.containerDiv; 

      // get de current class of the container an insert it to the debug window 
      var containerClass = $(settings.containerDiv).attr('class'); 

      // filling the debug window with the current browser's width 
      if(settings.debug=='on') { 
       $('#debug #currentWidth').text(browserWidth+'px'); 
       if(containerClass == "") { 
        $('#debug #currentClass').text('-'); 
       } else { 
        $('#debug #currentClass').text(containerClass); 
       }; 
      }; 

      // if statements for each resolution 
      if(settings.lower1024=='on'){ 
       if(browserWidth>311 && browserWidth<1023) { 
        $(containerDiv).removeClass(); 
        if (resizeTimer) clearTimeout(resizeTimer); 
        resizeTimer = setTimeout(lower1024, 10); 
       }; 
      } else if(settings.lower1024=='off') { 
       if(browserWidth<1023 && browserWidth>311) { 
        $(containerDiv).removeClass(); 
       }; 
      }; 
      if(settings.smartphones=='on'){ 
       if(browserWidth<310) { 
        if (resizeTimer) clearTimeout(resizeTimer); 
        resizeTimer = setTimeout(smartphones, 10); 
       }; 
      }; 
      if(settings.over1024=='on'){  
       if(browserWidth>1024 && browserWidth<1279 || browserWidth==1024) { 
        if (resizeTimer) clearTimeout(resizeTimer); 
        resizeTimer = setTimeout(over1024, 10); 
       }; 
      } else if(settings.over1024=='off') { 
       if(browserWidth>1024 && browserWidth<1279 || browserWidth==1024) { 
        $(containerDiv).removeClass(); 
       }; 
      }; 
      if(settings.over1280=='on'){  
       if(browserWidth>1280 || browserWidth==1280) { 
        if (resizeTimer) clearTimeout(resizeTimer); 
        resizeTimer = setTimeout(over1280, 10); 
       }; 
      }; 

      if(settings.over1600=='on'){  
       if(browserWidth>1600 || browserWidth==1600) { 
        if (resizeTimer) clearTimeout(resizeTimer); 
        resizeTimer = setTimeout(over1600, 10); 
       }; 
      }; 

      if(settings.over1850=='on'){  
       if(browserWidth>1850 || browserWidth==1850) { 
        if (resizeTimer) clearTimeout(resizeTimer); 
        resizeTimer = setTimeout(over1850, 10); 
       }; 
      }; 

      function lower1024() { 
       $(containerDiv).removeClass().addClass('lower1024'); 
      }; 
      function smartphones() { 
       $(containerDiv).removeClass().addClass('smartphones'); 
      }; 
      function over1024() { 
       $(containerDiv).removeClass().addClass('over1024'); 
      }; 
      function over1280() { 
       $(containerDiv).removeClass().addClass('over1280 floating'); 
      }; 
      function over1600() { 
       $(containerDiv).removeClass().addClass('over1600 floating'); 
      }; 
      function over1850() { 
       $(containerDiv).removeClass().addClass('over1850 floating'); 
      }; 


     }); 

    }; 

Answer 1

如果你想這只是適用於所有的AJAX請求，您可以使用ajaxSetup，然後設置一個complete功能適用於所有的AJAX請求。或者，只需在各個AJAX調用的complete或success函數內調用您的函數即可。

function doResize(){ 
    // resize stuff 
} 

$(window).bind('resize load', doResize); 

// some ajax call 
$.ajax(... 
    complete: function(){ 
     // stuff 
     doResize(); 
    } 
);