【问题标题】:jQuery: How do I chain .live() with .ajaxForm()?jQuery:如何将 .live() 与 .ajaxForm() 链接起来?
【发布时间】:2010-10-26 15:49:33
【问题描述】:

我有一个通过 XHR 拉入的表单,因此在最初呈现 DOM 时它还没有准备好。目前我使用类似的东西:

jQuery("[name='myform']").ajaxForm({ /* code here */ });

它在独立应用程序上运行良好。我嵌入它的应用程序很大,我需要能够在 myform 可用于 DOM 之前将 ajaxForm 绑定到 myform。无论如何我可以在这里结合 .live() 以便在通过 XHR 引入时让 jQuery 监视它?

** 编辑 **

这是正在执行的实际代码。没有 javascript 错误。它只是提交整页而不是 XHR 更新。

 jQuery("[name='clip_form2']").live('submit', function(e) { 
      $(this).ajaxSubmit({
        target: '#form_quotes_highlights_part',

        beforeSerialize: function(form, options) {
          alert("In beforeSerialize...");
          if (validate_time_text_highlights()) {
            if ( $tabChanged ) {
              diff(form[0]);
              jQuery('form[name=clip_form2] input[type=submit]').attr('disabled', 'disabled').val("<%= t('labels.please_wait') %>");
              return true;
            }
            else {
              return false;
            }
          }
          return false;
        },

        success: function() {
          jQuery('#form_quotes_highlights_part').fadeIn('slow');
        },

        complete: function() {
          jQuery("#wizard").expose().close();
        }
      });
      $tabChanged = false;

      add_change_listener("form[name=clip_form2]");

      Tabs.validateCancel( $( "button[name=Cancel]", "form[name=clip_form2]" ) );

      $("#clip_quote").NobleCount('#quote_count');
      $("#clip_quote2").NobleCount('#quote2_count');
      $("#clip_attribution").NobleCount('#attribution_count');

      if ( <%= is_defined?( @permitted_clip_read_only ) && @permitted_clip_read_only %> ) {
        jQuery( 'form[name=clip_form2] input' ).attr( "disabled", true );
        jQuery( 'form[name=clip_form2] textarea' ).attr( "disabled", true );
      } 
      e.preventDefault();
  });

【问题讨论】:

    标签: javascript jquery


    【解决方案1】:

    这样的事情应该可以解决问题:

    jQuery("[name='myform']").live('submit', function(e) {
      $(this).ajaxSubmit(/* code here */);
      e.preventDefault();
    });
    

    ajaxSubmit() 是魔法发生的地方(ajaxForm() 只是绑定了一个提交处理程序),这里我们只是监听submit 事件并调用ajaxSubmit()

    【讨论】:

    • 有什么理由使用 ajaxSubmit() 而不是 ajaxForm()?
    • @randombits - 我试图在上面详细说明这一点,你可以在这里看到ajaxForm() 确实很简单:github.com/malsup/form/blob/master/jquery.form.js#L444 它只是一个在下面调用ajaxSubmit() 的绑定机制。
    • 你不能用.delegate代替()吗?可能会获得性能优势。
    • @RyanP13 - 可能,这取决于您是否知道要绑定的更多本地上下文,如果没有其他内容,您可以将 jQuery("[name='myform']").live('submit', function(e) { 更改为 jQuery("body").delegate('[name='myform']', 'submit', function(e) {
    • @Nick - 同意如果你不知道上下文,坚持使用 .live() 可能更容易。我对当前的应用程序进行了如此大的更改,以至于我恢复为 .live() 以防止任何进一步的重构。 .delegate() 太酷了!