jQuery Form plugin - how to make ajaxForm() "live"?

Question

So I'm turning an "edit" form into an ajaxForm with the following:

$('#reviewForm').ajaxForm({
    success: function (response) {
        $('#bookReview').html(response);
    }
});

This returns the same form, that can be edited again, if necessary. The second form submission, however, no longer has the ajaxForm() attached to it, which makes sense.

How do I make sure this form is always an ajaxForm, no matter how many submissions have taken place, similar to how the live() function works?

Answer 1

You can either include the ajaxForm call in the response like:

<!-- the html for the form -->
<script type="text/javascript">
  $('#reviewForm').ajaxForm();
</script>

or you could do it as part of the success function:

function ajaxify(response, status, xhr, form){
   var review = $('#bookReview').html(response);
   $('form#reviewForm', review).ajaxForm({
      'success': ajaxify
   });
}

$('#reviewForm').ajaxForm({
   'success': ajaxify
});

I recommend the latter.

Answer 2

$('#myFormId').live('submit', function() {
    // submit the form
    $(this).ajaxSubmit();
    // return false to prevent normal browser submit and page navigation
    return false;
});

Sligtly modified example for ajaxSubmit from http://jquery.malsup.com/form/#api.