从元素中删除 jquery imgareaselect 插件答案

【问题标题】：Removing jquery imgareaselect plugin from element从元素中删除 jquery imgareaselect 插件
【发布时间】：2010-03-05 13:26:43
【问题描述】：

所以我使用这个简洁的 jquery 插件http://odyniec.net/projects/imgareaselect/ 它工作正常，但我使用 jquery ui 回调函数（对话框）触发它，我需要在对话框关闭后删除选择。

function initialize_selection() {
$('#image_area').imgAreaSelect({ x1: 10, y1: 10, x2: $('#image_area').width()-10, y2: $('#image_area').height()-10 , fadeSpeed: 400, handles: true});
}

$(function() {
$('#image_edit').click(function(){
    $('#edit_image_dialog').load('actions.php?action=edit_temp_image', function(){
            $('#edit_image_dialog').dialog({
                modal: true,
                resizable: false,
                width: 480,
                    buttons: {
            Ok: function() {
                        //foo_bar                                                                        
            },
                        Cancel: function() {
                        //foo_bar
            }
                    },
                    beforeclose: function(){
                    //What should i put here ???
                    ;}
            });
    initialize_selection();
        });
    });
});

我真的很感激一些提示，因为我是 jquery 的新手，我不能自己解决这个问题。

谢谢

【问题讨论】：

不确定，但是对于分享一个非常酷的 jQuery 插件的问题 +1！

标签： jquery jquery-ui-dialog img-area-select-jquery

【解决方案1】：

http://odyniec.net/projects/imgareaselect/usage.html

$('#image_area').imgAreaSelect({remove:true});

应该可以，但不确定

【讨论】：

【解决方案2】：

我发现删除选择治疗区域的唯一方法是：

"Close": function() { 
  $(".imgareaselect-selection").parent().remove();
  $(".imgareaselect-outer").remove();
  $(this).dialog("close"); 
},

以下内容对我不起作用（在 Wordpress 3.0.5 中的 jquery 和 jqueryui 元素中）

$(selector).imgAreaSelect( {remove: true} );

【讨论】：

+1 。 $(selector).imgAreaSelect( {remove: true} );对我没用。

【解决方案3】：

这对我有用：

var $ias = $('#imageArea').imgAreaSelect({
    instance: true
});

$('#clearBtn2').click(function() {
    $ias.cancelSelection();
});

【讨论】：

如果您想重新打开对话框并再次选择图像区域，这是一个更好的答案。 @Daniele 的回答将从您的元素中完全删除/销毁插件，但这只会删除视觉选择框和背景。

【解决方案4】：

根据HomeimgAreaSelect Documentation的选项文档

$('#image_area').imgAreaSelect( {remove: true} );

会成功的

【讨论】：

【解决方案5】：

根据文档：http://odyniec.net/projects/imgareaselect/usage.html

{remove: true} 实际上会完全删除 imgAreaSelect-y-ness。如果您想要做的只是框和灰色区域，（但允许用户稍后拖动新框）您想要 {hide: true}。

$('#image_area').imgAreaSelect( {hide: true} );

【讨论】：

【解决方案6】：

$('#image_area').imgAreaSelect({remove:true}); //For hiding the imagearea
$('#image_area').imgAreaSelect({remove:false}); //For resetting the imagearea

第一个语句隐藏 imgareaselect，第二个语句有助于在下次加载模式时重新加载裁剪功能。

我在从模态返回主窗口时使用了这两个语句，这样下次加载裁剪功能就不会出现问题了。

【讨论】：

【解决方案7】：

它确实有效，但在 -->$('#image_area').imgAreaSelect({remove:true}); 它不能用于标记其他照片

【讨论】：