ajax表单成功后运行jQuery插件答案

【问题标题】：Run jQuery Plugin after ajax form successajax表单成功后运行jQuery插件
【发布时间】：2014-05-13 14:23:18
【问题描述】：

我使用 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。这是正确的思维方式吗？我该怎么做？谢谢。

【问题讨论】：

通常最好使用提交事件而不是点击事件，否则您必须防止在用户按下输入时发生提交事件。
是的，您应该使用 ajaxForm 插件提供的回调，而不是全局 ajax 事件。
是的，凯文，我会做到的！好主意，谢谢！
Kevin，在下面发布了一些对我有帮助的东西，你能检查一下吗？
与文档示例中的操作方式相同。

标签： jquery ajax ajaxform

【解决方案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.
        }
    });
});

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

【讨论】：

没问题，很高兴我能帮上忙。