Question

我使用jqueryForm插件更新图像而不重新加载页面：

<script type="text/javascript" >
$(document).ready(function() {
    $('#submitbtn').click(function() {
        $("#viewimage").html('');
        $("#viewimage").html('Uploading...');
            $(".uploadform").ajaxForm({
            target: '#viewimage',
            }).submit();
    });
});
</script>

之后我想使用imgAreaSelect插件（当独奏时效果很好）

<script type="text/javascript">
$(document).ready(function () {
    $('img').imgAreaSelect({
        aspectRatio: '166:90',
        minHeight: 90,
        minWidth: 166,
        onSelectEnd: function (img, selection) {
            $('input[name="x1"]').val(selection.x1);
            $('input[name="y1"]').val(selection.y1);
            $('input[name="x2"]').val(selection.x2);
            $('input[name="y2"]').val(selection.y2);            
            $('input[name="width"]').val(selection.x2-selection.x1);
            $('input[name="height"]').val(selection.y2-selection.y1);        
        }
    });
});
</script>

现在第二个图形不起作用。

似乎我必须在jQuery Form成功之后立即使用imgAreaSelect函数（在jQuery形式documentation中有这样的回调函数。这是正确的思考方式吗？我该怎么做？谢谢。< / p>

Answer 1

按照预期的方式使用插件。

$(document).ready(function () {
    $(".uploadform").ajaxForm({
        target: '#viewimage',
        beforeSubmit: function () {
            // this happens before the ajax request
            $("#viewimage").html('Uploading...');
        },
        success: function () {
            // this happens after the ajax request
            $('img').imgAreaSelect({...}); // removed options for this sample, add them back in your code.
        }
    });
});

您不需要点击事件或提交事件，甚至不需要触发提交事件，这一切都由插件处理。这段代码替换了你问题中的两个代码片段。

在ajax表单成功后运行jQuery插件

1 个答案: