jQuery 使用 ajax 刷新元素时无法按类找到元素

Question

我想在使用jQuery库后动态上传图像并进行裁剪。

这是代码

 $(document).ready(function() {
 $('.preview').imgAreaSelect({ aspectRatio: '4:3', handles: true }); //this code is from crop library

        $('#photoimg').live('change', function()            { 
                   $("#preview").html('');
            $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
        $("#imageform").ajaxForm({
                    target: '#preview'
    }).submit();
        });

    });

这是HTML零件

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
 <img class="preview" src="uploads/1391586558.png" />
</div>

和更新图像的PHP部分

echo "<img src='uploads/".$actual_image_name."'  class='preview'>";

好吧，我可以在开始时裁剪图像，但是当它用Ajax替换另一个（带有相同的类名称）时，它就停止工作。

有什么建议？

Answer 1

def $.live()的首先您应该使用

$('#photoimg').on('change', function(){});

它不起作用，因为您将.imgAreaSelect.放在上面的元素已被删除。

当div#preview充满您的更新图像时，您应该再次启用它。

$("#imageform").ajaxForm({
    target: '#preview',
    success: function() { 
        $('#preview').find('.preview').imgAreaSelect({ aspectRatio: '4:3', handles: true });
    } 
}).submit();

整个示例：

(function(){
    var imgAreaSettings = { aspectRatio: '4:3', handles: true };
    var preview_div = $("#preview"); // cache this one, it's used multiple times so makes searching DOM faster.
    $('#photoimg').on('change', function(){ 
        preview_div .html('');
        preview_div .html('<img src="loader.gif" alt="Uploading...."/>');
        $("#imageform").ajaxForm({
            target: '#preview',
            success: function() { 
                preview_div.find('.preview').imgAreaSelect({ aspectRatio: '4:3', handles: true });
            } 
    }).submit();
})();

Answer 2

您需要再次致电

$('.preview').imgAreaSelect({ aspectRatio: '4:3', handles: true });

图像更换后。