Question

我正在使用以下代码在加载时检测用户屏幕分辨率，并相应地调整大小和更改容器类。因此，允许我为该容器中的元素指定不同的CSS。

当页面上的所有内容都完全刷新时，此功能非常有用。但是，如果我通过ajax加载新内容它不起作用，因为此代码仅绑定到'load'和'resize'。

最终，我必须调整浏览器的大小才能获得所需的类更改以应用于容器。

有没有办法让它检测到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，然后为所有AJAX请求设置complete函数。或者，只需在您的各个AJAX调用的complete或success函数内调用您的函数。

function doResize(){
    // resize stuff
}

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

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

检测ajax内容加载以在Jquery中触发'load'事件

1 个答案: