Question

我有一个多次使用的Ajax函数。我正在使用此功能添加到单击事件中以将内容加载到侧抽屉中。

$( ".link" ).on( "click", function(e) {
    e.preventDefault();     
    loadSideDrawerContent($(this).attr('href'), 'middle', true, imageSuperZoom);
    openSideDrawer('middle');
});

现在 loadSideDrawerContent 是一个简单的Ajax调用，可以获取html内容并将其存储在div中。

问题：

我正在尝试运行一个单独的函数，该函数可以在ready（）加载时运行，但不会在加载内容时运行。

$( ".link" ).on( "click", function(e) {
    e.preventDefault();     
    loadSideDrawerContent($(this).attr('href'), 'middle', true, imageSuperZoom);
    openSideDrawer('middle');

    $(document).ajaxComplete(function(){
        if (typeof resizeImage == 'function') { 
            console.log('it exists');
            resizeImage(); 
        }else{
            console.log('it doesnt');
        }
    });

});

我尝试了以下但我没有成功。该功能确实存在，但它没有发射。

编辑：调整大小功能（注意：这在就绪电话上工作正常 - 只是在内容加载后才能正常工作）

function resizeImage(){
    $mage_resize.each(function () {

        var element = jq(this), 
            src = jq(this).attr('src'),
            regx = /wid=\d+(\.\d)*/g,
            currentWidth,
            newWidth,
            newSrc = {};

        if ($(window).width() > 1824) {

            sizingMethod(src, regx, currentWidth, newWidth, newSrc, Math.round(2000/2));

        } else if (jq(window).width() <= 1824 && jq(window).width() > 1366) {

            sizingMethod(src, regx, currentWidth, newWidth, newSrc, Math.round(1824/2));
        }

        element.attr('src', newSrc.src);
    });

}

Answer 1

你有几个选择

首先是将$ajaxComplete移出点击处理程序。由于这是一个全局事件处理程序，因此无需将其嵌套在另一个事件处理程序

中

$(document).ajaxComplete(function(){
        if (typeof resizeImage == 'function') { 
            console.log('it exists');
            resizeImage(); 
        }else{
            console.log('it doesnt');
        }
});


$( ".link" ).on( "click", function(e) {
    e.preventDefault();     
    loadSideDrawerContent($(this).attr('href'), 'middle', true, imageSuperZoom);
    openSideDrawer('middle');

});

如果页面中有任何其他ajax，您可能需要添加条件以检查ajaxComplete或jXHR对象中的设置对象，并且仅根据使用的URL等条件调整大小

替代方案是摆脱ajaxComplete并在resizeImage()

中使用的ajax回调中调用loadSideDrawerContent()

例如，如果loadSideDrawerContent使用load()作为ajax方法：

$(element).load(url, function(){
     // new html exists now
     resizeImage();
});

还有其他替代方案，例如创建自定义事件并在应用中的各个位置触发这些事件。自定义事件的回调将调用所需的任何函数。

或者将resizeImage()绑定到$(window).on('resize）`并始终触发该事件

注意：插入新元素时，需要重新定义集合$mage_resize。您无法创建尚不存在的元素的缓存

加载Ajax内容后运行每个函数

1 个答案: