如何在ajax加載後激活Jcrop選擇

Question

我在我的項目中使用了Jcrop。這個問題並不重要，但如果我能解決這個問題會更好。

我可以通過ajax請求（而不是Jquery ajax）上傳圖片，並且圖片在上載後可以加載到頁面而無需刷新頁面。到現在爲止，一切都很好。將圖像加載到頁面後，Jrop不會在沒有刷新頁面的情況下激活。這裏是Jcrop激活腳本：

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

我不知道它很重要，這個劇本是不是裏面的$（document）。就緒（函數（）{}

我試圖觸發Jcrop以$（。 '#cropbox'）.load和$（'＃cropbox'）。點擊函數而不是jQuery（window）.load（function（）{}函數，但是什麼也沒有發生。只需在不刷新瀏覽器的情況下通過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 
    }); 
    } 
}); 

Answer 2

你可以發佈你的ajax腳本嗎？您應該能夠在代碼後執行jcrop以將圖像放入#cropbox。