jQuery jcrop插件：如何发布？

Question

我使用辉煌的jcrop plugin来实现图像裁剪。

但是，有一个问题。我希望用户选择一个区域，然后看到一个对话框。当他们在对话框中输入内容并单击确定时，我希望它们返回到没有任何选定内容的图像。

这是我的代码：

jQuery(window).load(function(){ 
    var jcrop_api = $.Jcrop('#cropbox',{ 
     boxWidth: 1400, 
     onSelect: showAlert 
    }); 
}); 
function showAlert(c) 
{ 
    var structidx = prompt("Enter number here: ", ""); 
    if (structidx!=null && structidx!="") { 
       // TODO: some handling here 
     alert("Entry has been saved"); 
     jcrop_api.release(); 
    } else { 
     jcrop_api.release();    
    } 
}; 

然而，与此，当用户点击确定或提示取消，他们回到这仍然是积极“选择”的图像。当他们移动鼠标时，它会继续选择 - 他们不能选择一个新的区域。感觉破了。

我认为这是一个javascript流问题 - showAlert正在退出并将我返回到浏览器的先前状态，即选中了一个区域 - 但我不知道如何绕过它。

谢谢！

Answer 1

试试这个：

jQuery(window).load(function() { 
    // function definition first 
    function showAlert(c) { 
    var structidx = prompt("Enter number here: ", ""); 
    if (structidx!=null && structidx!="") { 
     // TODO: some handling here 
     alert("Entry has been saved"); 
    } 
    jcrop_api.release(); 
    } 

    // make a global variable by leaving off the "var" keyword 
    jcrop_api = $.Jcrop('#cropbox',{ 
    boxWidth: 1400, 
    onSelect: showAlert 
    }); 
}); 

Answer 2

你不能以这种方式获取API。试试这个：

$(window).load(function(){ 
    var jcrop_api = $.Jcrop('#cropbox',{...}); 
}); 

另外请注意，您需要在同一范围内声明回调函数（S）为jcrop_api变量，如果他们引用它。您的示例代码中不是这种情况。