I have a form which gets introduced via XHR and I need to be able to bind an event on it, for submit. I've downloaded the jquery.form.js plugin. What's the best way to perform a late binding so that I can do something such as:

 $(document).ready(function() {
        // bind 'myForm' and provide a simple callback function
        $('#myForm').ajaxForm(function() {
            alert("Thank you for your comment!");
        });
    });

Unfortunately since the form isn't readily available when the DOM first populates, this won't work.

** EDIT **

I've tried binding to the form AFTER it is retrieved via XHR and haven't had much luck. Here's how it looks:

 $.get("foo.php", function(data) {
    $('#my_form').ajaxForm(function() {
         alert("Thank you for your comment!");
     });
});

I think you don't do it right. The way I use jquery forms is this:

$('#myform').submit(function(){
 $(this).ajaxSubmit(function(){
  alert('Thanks for your comment');
 });
 return false
});

You call this after the form is injected into DOM. Another way to do this is to using live binding from jquery

$('#myform').live('submit', function(){
 $(this).ajaxSubmit(function(){
  alert('Thanks for your comment');
 });
 return false
});

Any way you pick, you must include this piece of code into $(document).ready()

more