Как ждать загрузки формы перед применением функций формы?

Question

На моем сайте есть кнопка оформления заказа, которая динамически загружает форму, в которой пользователь может заполнить свои личные данные.Форма имеет идентификатор #order.После загрузки формы она должна вызвать функцию .submit из плагина jquery-form .

Когда я впервые сделал это, это не сработало, поэтому я применил свои минимальные навыки отладки (устанавливая оповещения, я не знаю лучший метод ;-)).Внезапно это сработало, когда я поместил предупреждение между загрузкой формы и вызовом .submit.

Я подумал, что это как-то связано с тем, что форма не была полностью загружена перед вызовом .submit.Но после быстрого поиска я обнаружил, что функция .html является синхронной, поэтому любой код, выполняемый после вызова .html (), обязательно будет выполнен после установки html.

Может кто-нибудь помочь мне с этой проблемой?

$('.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; 
    });
  });
});

alert вызвал задержку, которая обеспечила обновление DOM к моменту запуска следующих битов вашего кода. Я поместил их в соответствующий обработчик, чтобы они стреляли в нужное время.