Question

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!');       }); });      

Answer 1

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()