Jquery에서 'load'이벤트를 발생시키기 위해 ajax 콘텐츠로드 감지하기

Question

로드 및 크기 조정시 사용자 화면 해상도를 감지하고 그에 따라 컨테이너 클래스를 변경하려면 다음 코드를 사용하고 있습니다. 따라서 해당 컨테이너 내의 요소에 다른 CSS를 지정할 수 있습니다. 페이지의 모든 내용이 완전히 새로 고칠 때

이 잘 작동합니다. 그러나이 코드는 'load'및 'resize'에만 바인딩되므로 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

, 당신은 ajaxSetup을 사용하여 다음 AJAX 요청의 모두를위한 complete 기능을 설정할 수 있습니다. 또는 개별 AJAX 호출의 complete 또는 success 함수 내에서 함수를 호출하면됩니다.

function doResize(){ 
    // resize stuff 
} 

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

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