Question

I have a checkout-button on my site wich dynamicly loads the form where the user can fill in his/her personal details.
The form has an id of #order. After the form is loaded it must call the .submit function from the jquery-form plugin.

When i first made this it did not work so i put my minimal debug skills to use (placing alert’s, i know not the best method ;-)). Suddenly it worked when i put an alert between the loading of the form and the .submit call.

I figured it had something to do with the form not being completely loaded before calling the .submit. But after a quick search i found that the .html function is synchronous so any code
executed after the .html() call will definitely occur after the html
is set.

Can someone please help me with this problem?

$('.checkout').live('click', function(event) {
  event.preventDefault();                       
  $.get('/gva/templates/gva/form.html', function(data){
    $('#blog').html(data);
  });
  alert('with this alert it works, without it doesn't'); 

  var options = { 
    target:        '#response',   
    beforeSubmit:  validate,  
    success:       showResponse  
  };

  $('#order').submit(function() { 
    $(this).ajaxSubmit(options); 
    return false; 
  });
});

Answer 1

$('.checkout').live('click', function(event) {
  event.preventDefault();                       
  $.get('/gva/templates/gva/form.html', function(data){
    $('#blog').html(data);

    var options = { 
      target:        '#response',   
      beforeSubmit:  validate,  
      success:       showResponse  
    };

    $('#order').submit(function() { 
      $(this).ajaxSubmit(options); 
      return false; 
    });
  });
});

The alert caused a delay which ensured the DOM had been updated by the time the next bits of your code fired. I’ve put them in the proper handler so that they fire at the proper time.