Как применять гибкие функции таблицы к таблице, загруженной ajax?

Question

У меня есть небольшой скрипт, который применяет таблицы с учетом состояния css при изменении размера экрана, который работает просто отлично. Проблема в том, что если таблица загружается на страницу VIA ajax, сценарий не будет работать на мобильных устройствах, потому что экран никогда не будет изменен.

здесь сценарий:

jQuery(document).ready(function() { 


    var switched = false; 
    var updateTables = function() { 
    if ((jQuery(window).width() < 767) && !switched){ 
     console.log('reconfig table'); 
     switched = true; 
     jQuery("table.responsive").each(function(i, element) { 
     splitTable(jQuery(element)); 
     }); 
     jQuery('.scrollable.scroll-right').scrollLeft(10000); 
     return true; 
    } 
    else if (switched && (jQuery(window).width() > 767)) { 
     switched = false; 
     jQuery("table.responsive").each(function(i, element) { 
     unsplitTable(jQuery(element)); 
     }); 
    } 

    jQuery('.scrollable.scroll-right').scrollLeft(10000); 


    }; 

    jQuery(window).load(updateTables); 
    jQuery(window).on("redraw",function(){switched=false;updateTables();}); // An event to listen for 
    jQuery(window).on("resize", updateTables); 


    function splitTable(original) 
    { 
     var wrapperClass = ''; 
     var classnames = jQuery('table.responsive').attr('data-scrollbar-position'); 
     if(classnames == 'left'){ 
     wrapperClass = 'scroll-right'; 
     } 


     original.wrap("<div class='table-wrapper' />"); 

     var copy = original.clone(); 
     copy.find("td:not(:first-child), th:not(:first-child)").css("display", "none"); 
     copy.removeClass("responsive"); 

     original.closest(".table-wrapper").append(copy); 
     copy.wrap("<div class='pinned' />"); 
     original.wrap("<div class='scrollable " + wrapperClass + "' />"); 

    setCellHeights(original, copy); 
    } 

    function unsplitTable(original) { 
    original.closest(".table-wrapper").find(".pinned").remove(); 
    original.unwrap(); 
    original.unwrap(); 
    } 

    function setCellHeights(original, copy) { 
    var tr = original.find('tr'), 
     tr_copy = copy.find('tr'), 
     heights = []; 

    tr.each(function (index) { 
     var self = jQuery(this), 
      tx = self.find('th, td'); 

     tx.each(function() { 
     var height = jQuery(this).outerHeight(true); 
     heights[index] = heights[index] || 0; 
     if (height > heights[index]) heights[index] = height; 
     }); 

    }); 

    tr_copy.each(function (index) { 
     jQuery(this).height(heights[index]); 
    }); 
    } 

}); 

как я могу применить это на мобильные устройства?

Answer 1

После загрузки нового контента с помощью AJAX, запустить

jQuery(window).resize(); 

Это инициирует событие изменения размера и должен перерисовывать.