在 ajax 加载的图像上激活 Jcrop

Posted 2023-02-25

【中文标题】在 ajax 加载的图像上激活 Jcrop

【英文标题】：Activiating Jcrop on ajax loaded image

【发布时间】：2012-06-25 20:25:08

【问题描述】：

从 ajax 返回的 html img 具有“tocrop”类。目前我在调用ajax调用成功的函数：

$("#imageform").ajaxForm(
        target: '#image_upload_preview',
        success: jcropp(),
)

function jcropp()
    $('.tocrop').Jcrop();
    

我曾尝试使用 .load()、setInterval() 和 clearInterval(当 $('.tocrop').Jcrop())、.bind() 在函数加载后绑定函数...似乎没有工作

已经有一个thread，但解决方案不起作用

任何帮助将不胜感激 这是从服务器返回的，已经尝试将 $('.tocrop').load() 绑定到 jcrop 函数：

<img class='tocrop' src='/tempupload/".$upload_data['file_name']."'/>

【参考方案1】：

你想要吗

success: jcropp

而不是

success: jcropp()  

喜欢

$("#imageform").ajaxForm(
    target: '#image_upload_preview',
    success: jcropp
);

或类似的，如果您想检查图像加载事件是否也成功。请澄清您从服务器返回的内容，如果它是一些 html，那么您应该为图像绑定一个加载事件，因为在触发成功时可能不会加载图像。

$("#imageform").ajaxForm(
    target: '#image_upload_preview',
    success: function(data)
        jcropp();
        
);

根据您的评论“从服务器重新调整的 html 具有要加载的类”

$("#imageform").ajaxForm(
    target: '#image_upload_preview',
    success: function(data)
        var src = $('.tocrop').attr('src');
        $('.tocrop').load(function()
            $(this).Jcrop();
            ).attr('src',src);
        
);

【讨论】：

我已经尝试过使用 .load() 但是你为什么在这里搞乱 src 属性？

好的，谢谢，我想我没有包装第二个功能。但我省略了 .attr() 的东西，不知道你想在那里做什么

在定义 load() 之后设置 src 可以确保它被触发，看起来，当调用成功时，元素可能还没有插入到 DOM 中，你可以试试 alert($('.tocrop ').length && $('.tocrop').attr('src')) 里面成功，以确保它当时存在