如何在应用表单功能之前等待表单加载？答案

【问题标题】：How to wait for form to load before applying form functions?如何在应用表单功能之前等待表单加载？
【发布时间】：2011-02-20 20:02:02
【问题描述】：

我的网站上有一个结帐按钮，它可以动态加载表单，用户可以在其中填写他/她的个人详细信息。表单的 ID 为#order。加载表单后，它必须从jquery-form 插件调用.submit 函数。

当我第一次做这个时它不起作用，所以我使用了我最低限度的调试技能（放置警报，我知道不是最好的方法 ;-)）。当我在表单加载和.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; 
  });
});

【问题讨论】：

标签： javascript jquery forms load

【解决方案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 已更新。我已将它们放入适当的处理程序中，以便它们在适当的时间触发。

【讨论】：