jquery - 如何在ajax加载后激活Jcrop选择

Question

我在我的项目中使用 Jcrop。这个问题并不严重，但如果我能解决它就更好了。

我可以通过ajax请求(不是Jquery ajax)上传图像，并且图像可以在上传后加载到页面而无需刷新页面。到目前为止，一切都很好。图像加载到页面后，如果不刷新页面，Jrop 不会激活。这是 Jcrop 激活器脚本:

    jQuery(window).load(function(){
      jQuery('#cropbox').Jcrop({
        onChange: showPreview,
        onSelect: showPreview,
        aspectRatio: 3/4
      });
    });

我不确定这是否重要，该脚本不在 $(document).ready(function(){} 内。

我尝试使用 $('#cropbox').load 和 $('#cropbox').click 函数而不是 jQuery(window).load(function(){} 函数触发 Jcrop，但没有任何反应。

你有什么想法吗？是否可以在通过ajax请求将图像加载到页面后立即激活Jcrop而不刷新浏览器？

这是 Jcrop 的用法:

// Remember to invoke within jQuery(window).load(...)
// If you don't, Jcrop may not initialize properly
$(window).load(function(){
                var imgWidth = $('#cropbox').width();
                var imgHeight = $('#cropbox').height();

                $('#cropbox').Jcrop({

                    onChange: showPreview,
                    onSelect: showPreview,
                    aspectRatio: 3/4,
                    setSelect: [ ((imgWidth/2)-60), 60, ((imgWidth/2)+60), 220 ],
                    addClass: 'custom',
                    bgColor: 'yellow',
                    bgOpacity: .8,
                    sideHandles: false

                });

            });

和图片上传按钮:

<button onclick="ajaxUpload(this.form,'http://www.yemeklog.com/ajax/ajaxupload.php?filename=filename&amp;maxSize=9999999999&amp;maxW=400&amp;fullPath=http://www.yemeklog.com/images/users/160/&amp;relPath=../images/users/160/&amp;colorR=120&amp;colorG=120&amp;colorB=120&amp;maxH=600','upload_area','&lt;img src=\'http://static.yemeklog.com/images/ajax-bar-loader.gif\' width=\'220\' height=\'19\' border=\'0\' /&gt;','&lt;img src=\'images/error.gif\' width=\'16\' height=\'16\' border=\'0\' /&gt; An error occured. Please contact.'); return false;">Upload Image</button>

和 ajaxupload.js 文件:

function $m(theVar){
    return document.getElementById(theVar)
}
function remove(theVar){
    var theParent = theVar.parentNode;
    theParent.removeChild(theVar);
}
function addEvent(obj, evType, fn){
    if(obj.addEventListener)
        obj.addEventListener(evType, fn, true)
    if(obj.attachEvent)
        obj.attachEvent("on"+evType, fn)
}
function removeEvent(obj, type, fn){
    if(obj.detachEvent){
        obj.detachEvent('on'+type, fn);
    }else{
        obj.removeEventListener(type, fn, false);
    }
}
function isWebKit(){
    return RegExp(" AppleWebKit/").test(navigator.userAgent);
}
function ajaxUpload(form,url_action,id_element,html_show_loading,html_error_http){
    var detectWebKit = isWebKit();
    form = typeof(form)=="string"?$m(form):form;
    var erro="";
    if(form==null || typeof(form)=="undefined"){
        erro += "Hata kodu: 1.\n";
    }else if(form.nodeName.toLowerCase()!="form"){
        erro += "Hata kodu: 2.\n";
    }
    if($m(id_element)==null){
        erro += "Hata kodu: 3.\n";
    }
    if(erro.length>0){
        alert("Yükleme esnasında hata oluştu:\n" + erro);
        return;
    }
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id","ajax-temp");
    iframe.setAttribute("name","ajax-temp");
    iframe.setAttribute("width","0");
    iframe.setAttribute("height","0");
    iframe.setAttribute("border","0");
    iframe.setAttribute("style","width: 0; height: 0; border: none;");
    form.parentNode.appendChild(iframe);
    window.frames['ajax-temp'].name="ajax-temp";
    var doUpload = function(){
        removeEvent($m('ajax-temp'),"load", doUpload);
        var cross = "javascript: ";
        cross += "window.parent.$m('"+id_element+"').innerHTML = document.body.innerHTML; void(0);";
        $m(id_element).innerHTML = html_error_http;
        $m('ajax-temp').src = cross;
        if(detectWebKit){
            remove($m('ajax-temp'));
        }else{
            setTimeout(function(){ remove($m('ajax-temp'))}, 250);
        }
        $('#ajax_image_container').slideDown('slow');
    }
    addEvent($m('ajax-temp'),"load", doUpload);
    form.setAttribute("target","ajax-temp");
    form.setAttribute("action",url_action);
    form.setAttribute("method","post");
    form.setAttribute("enctype","multipart/form-data");
    form.setAttribute("encoding","multipart/form-data");
    if(html_show_loading.length > 0){
        $m(id_element).innerHTML = html_show_loading;
    }
    form.submit();
}

Answer 1

收到ajax请求后，您可以对图像调用jcrop。

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    var $myImage = $("<img></img>", {
        src: data.img,    
      }).appendTo('#cropbox');
    $myImage.Jcrop({
      onChange: showPreview,
      onSelect: showPreview,
      aspectRatio: 3/4
    });
  }
});