Question

我正在使用imageareaselect制作ajax图片上传和裁剪器。文件上传并回显到页面，进而触发imgareaselect功能。当我直接将其写入文档时，该功能起作用：

<div id="PhotoPrev"><img src="/uploads/image.jpeg ?>" alt="Photo Preview" id="photo" name="photo" /></div>

但是当图像通过ajax加载时它不会。所以我认为我需要一个.live功能，但是如何努力。

这是我的剧本：

$(document).ready(function () {
    $('img#photo').imgAreaSelect({
        aspectRatio: '1:1',
        onSelectEnd: getSizes
    });

$('#endre').click(function(){
$('.cropform').fadeIn();
$('#photoimg').fadeIn();
$("#endre").fadeOut();
});
});
$('#photoimg').live('change', function() { 
$("#thumbs").html('');
showLoader();               
$("#cropimage").ajaxForm({
target: '#thumbs'
}).submit();hideLoader();
});

任何指针都非常赞赏如何在ajax上传和回显图像后触发areaselect。

Answer 1

您是否尝试将所有内容放入$(document).ready()

$(document).ready(function() {
    $('img#photo').imgAreaSelect({
        aspectRatio: '1:1',
        onSelectEnd: getSizes
    });

    $('#endre').click(function() {
        $('.cropform').fadeIn();
        $('#photoimg').fadeIn();
        $("#endre").fadeOut();
    });

    $('#photoimg').live('change', function() {
        $("#thumbs").html('');
        showLoader();
        $("#cropimage").ajaxForm({
            target: '#thumbs'
        }).submit();
        hideLoader();
    });
});

Answer 2

使用.delegate（）而不是.live（）。我一直这么说，但是.live（）在一个大的DOM树中真的很烦人。那是因为每个时间和事件都发生在某个元素上，这会被启动到文档元素并在那里处理。

通过使用.delegate（），您可以指定要处理事件的DOM中的上层元素。

在这种情况下，你可以这样做：

$(SelectorToUpperElementInDOM).delegate('#photoimg',"change",function() { 
$("#thumbs").html('');
showLoader();               
$("#cropimage").ajaxForm({
target: '#thumbs'
}).submit();hideLoader();
})

无论如何，我无法确定你的回调函数是做什么的。请说明您是否需要更多帮助。

imgareaselect with .live？

2 个答案: