Activiating Jcrop on ajax loaded image

Question

html img returned from ajax has class of 'tocrop'. Currently I Calling the function on the success of the ajax call:

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

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

I have tried using .load(), setInterval() and clearInterval(when $('.tocrop').Jcrop()), .bind() to bind a function after it has loaded...nothing seems to work

There has already been a thread on this but the solutions did not work

Any help would be greatly appreciated This is being returned from server, have already tried binding $('.tocrop').load()to jcrop function:

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

Answer 1

do you want

success: jcropp

instead of

success: jcropp()  

like

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

or something like, if you want to check image load event also in success. Please clarify what you are returning from server, if its some html then you should bind a load event for image as the image might not be loaded at the time success is triggered.

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

from your comment "html retuned from server has class toload"

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