jquery boxyプラグイン - ajax経由でフォームをロードして送信

Question

BoxyプラグインでJQueryを使用しています。

ユーザーが1ページのリンクをクリックすると、Boxy.loadを呼び出してフォームをポップアップに読み込みます。フォームがロードされ、問題なくポップアップ内に表示されます。

しかし、フォーム要素を選択できないため、フォームを送信イベントにバインドすることはできません。

これは、イベントハンドラである：

$('#flag-link a.unflagged').click (function(e) { 
     url = $(e.target).attr('href'); 
     Boxy.load(url, {behaviours: function(r) { 
      alert ($("#flag-form").attr('id')); 
      } 
     }); 
    }); 

、それが表示されたときにアラートが「未定義」を読み出します。

そして、これは形式です：

<form id="flag-form" method="POST" action="somepage">   
    <table> 
     <tr><td><input type="text" name = "name"></td></tr> 
     <tr><td><input type="submit" value="OK"></td></tr> 
    </table> 
</form> 

私が間違っているのか？

Answer 1

の操作を行います。

$("#flag-form").live("submit", function(){ ... } 

は現在、ライブ方法は、イベントを提出するサポートしていないことが実証されています。しかし、私はChromeとFFでそれを動作させることができました。一方、私はそれをIEで動作させることができませんでした。クロスブラウザとの互換性のためのより良い方法は、フォームのサブミットボタンをクリックイベントにバインドすることです。

$("#flag-form-submit").live("click", function(){ 

Answer 2

最初（副次的な問題ですが、問題の原因となる可能性があります）、id="flag-form"ではなく、id = "flag-form"（スペースなし）にする必要があります。

第2に、r.find()は不要です。ただ、私の知る限り理解し、live()方法は、このような場合にはイベントに要素を結合するために使用されている必要があり$("#flag-form").attr("id")

Answer 3

私は（）メソッドを使用して生きることに加えて、behaviours: function (e) {}作品のメソッドを宣言することを学びました。

例えば：

$('#flag-link a.unflagged').click (function() { 
    Boxy.load(this.href, { 
     behaviours: function(r) { 
     r.find('#flag-form').bind('submit', function() { 
      // do on submit e.g. ajax calls etc. 
     }); 
     } 
    }); 
    return false; 
}); 

Answer 4

箱型は、iframe内にURL（url = $(e.target).attr('href');）を開きます。したがって、最初のページ（親ページ）からフォームを見つけることはできません。フォームをバインドするコードは、子ページ（Boxy iframe）にある必要があります。あなたのコードを使用してiframeのURLを確認できます。url = $(e.target).attr('href');