imageareaselect 与 .live ？

发布于 2025-01-04 03:19:15 字数 825 浏览 3 评论 0原文

我正在使用 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 上传并回显图像后触发区域选择的指针都非常感谢。

原文

I'm making an ajax image upload and cropper using imageareaselect. The file gets uploaded and echo's into the page, which in turn should trigger the imgareaselect function.
The function works when i write this directly in to the document :

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

but when the image gets loaded through ajax it does'nt.
So i'm thinking i need a .live function for it, but struggling with how to.

this is my script:

$(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();
});

Any pointers greatly appreciated on how to trigger areaselect after ajax uploads and echoes the image.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夏夜暖风 2025-01-11 03:19:15

您是否尝试过将所有内容放入 $(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();
    });
});

Have you tried putting everything inside $(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();
    });
});

回复收藏 0 原文

泛滥成性 2025-01-11 03:19:15

使用 .delegate() 而不是 .live()。我已经说过很多次了，但事实证明 .live() 在大 DOM 树中确实很烦人。这是因为每次某个元素上发生事件时，都会将其启动到文档元素并在那里进行处理。

通过使用 .delegate()，您可以指定 DOM 中您想要处理事件的上部元素。

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

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

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

Use .delegate() instead of .live(). I've been saying this a lot, but .live() turns out to be really anoying within a big DOM tree. That's because every time and event occurs on some element, this is launched up to the document element and handled there.

By using .delegate(), you can specify wich of the upper elements in the DOM you'd like to handle the event.

In this situation, you can do this:

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

Anyway, I can't be sure of what your callback functions does. Please specify if you need some more help.

回复收藏 0 原文

~没有更多了~