2

ページをリロードせずにJQueryを使用してフォームを送信しようとしています。これはスタンドアロンページのjQueryフォームプラグインでうまく機能しますが、AJAXでロードしたページで機能する必要があります。

<script type="text/javascript"> 
  $('#LoadForm').click(function() {
    $('#formDiv1').load('FormGen.asp');
  });
</script>

ただし、読み込まれたフォームで[送信]をクリックすると、AJAXだけで送信するのではなく、フォームが送信されてページが更新されます。

<script type="text/javascript"> 
 // wait for the DOM to be loaded 
 $(document).ready(function() { 
   // bind 'myForm' and provide a simple callback function 
   $('#myForm').ajaxForm(function() { 
      alert("Thank you for your comment!"); 
   }); 
 }); 
</script>

私が呼び出すページにコードを配置し、そのスタンドアロンを使用すると、完璧に機能します。ただし、別のページからフォームを読み込もうとすると機能しません。

4

3 に答える 3

2

ページが読み込まれるとき、要素はページに#myForm まだ存在しないため（ajaxで読み込むため）、ajaxForm()プラグインは初期化されません。

ajaxコンテンツが正常に読み込まれたら、初期化する必要があります。これを行うには、ロードが発生したときに実行される.load（）メソッドのコールバックパラメーターを使用します。

$('#formDiv1').load('FormGen.asp', function(data, status, xhr) {

    // this is executed when the load has finished
    $('#myForm').ajaxForm(function() { 
        alert("Thank you for your comment!"); 
    }); 

});
于 2012-01-16T11:35:29.750 に答える
1

アップデート：

eerrrr ...私の悪い、質問を正しく読んでいませんでした-DidierGhysの答えはより適切なようです。

click()イベントハンドラーを「クリック」JavaScriptイベントにバインドします。バインドは、スクリプトの実行時に行われます。

ツアーフォームをajaxでclick()ロードしているので、フォームが読み込まれる前に関数が呼び出され、バインディングがないと思います。

live()関数を使用してみてください：

  $('#LoadForm').live("click", function() {
     $('#formDiv1').load('FormGen.asp');
  });
于 2012-01-16T11:37:46.950 に答える
-1

on()メソッドを使用して、AJAXによってロードされているものにバインドする必要があります-http ://api.jquery.com/on/

于 2012-01-16T11:30:53.397 に答える