Question

我创建了一个片段，它会检查div中的所有图像，并根据其大小添加一个类。

我目前已经准备好了文档，并且在页面加载时我的工作正常。

但是，我正在创建一个CMS，您可以在其中编辑页面本身的文本，然后通过ajax进行更新。

通话响应通常如下：

success: function (response) {
    if (response.databaseSuccess) {
        $("#container #" +response.postid).load("#container #" +response.postContentID);
        $targetForm.find(".saveupdatebutton").qtip("hide");
    }
}

在此之后，通过.load（）函数加载的div中的图像不会调整大小。

我已经尝试将我使用的代码放在成功响应中，但没有运气。

我应该如何在回复后调用代码？

下面是代码：

$(document).ready(function () {
// check each image in the .blogtest divs for their width. If its less than X make it full size, if not its poor and keep it normal
var box = $(".blogtest");
box.find("img.buildimage").on('load', function () {
    var img = $(this),
        width = img.width();
    if (width >= 650) {
        img.addClass("buildimage-large");
    } else if (width < 500 && width > 101) {
        img.addClass("buildimage-small");
    }
    // if image is less than X, its most likely a smiley
    else if (width < 100) {
        img.addClass("buildimage-smiley");
    }
    }).filter(function () {
        //if the image is already loaded manually trigger the event
        return this.complete;
    }).trigger('load');
});

Answer 1

根据您使用的jQuery版本，您可以将.on更改为.live，如下所示：

box.find("img.buildimage").live('load', function () {

如果这不起作用，那么你可以尝试下面。然后你必须以下面的“正确”方式做到这一点：

首先将您的函数外部化以调整图像大小：

$(document).ready(function () {
    // check each image in the .blogtest divs for their width. If its less than X make it full size, if not its poor and keep it normal
    var box = $(".blogtest");
    box.find("img.buildimage").on('load', imageOnload)
        .filter(function () {
            //if the image is already loaded manually trigger the event
            return this.complete;
        })
        .trigger('load');
});

function imageOnload(evt){
    var img = $(evt.currentTarget),
        width = img.width();
    if (width >= 650) {
        img.addClass("buildimage-large");
    } else if (width < 500 && width > 101) {
        img.addClass("buildimage-small");
    }
    // if image is less than X, its most likely a smiley
    else if (width < 100) {
        img.addClass("buildimage-smiley");
    }
}

然后，您可以在成功回调中添加此语句：

$("#container #" +response.postid).on("load", imageOnload);

在ajax成功回调中运行一个函数

1 个答案: