動的にロードされたフォームをjqueryで送信しないようにするにはどうすればよいですか？

Question

私はAJAXログインシステムに取り組んでいます。今、ユーザーがリンクをクリックすると、ユーザーが「ログイン」リンクをクリックすると、ログインフォームが動的に読み込まれます。私はこれにAJAXを使用しているので、送信ボタンをクリックしたときに実際にフォームが送信されないようにしたい。私はロード機能の一部として次のコードを試してみましたが、フォームは正しくロードされますが、フォームは引き続き正常に送信されます。

$('#loginBox').load('loginform.php'); 
$('#loginBox form').submit(function(event) { 
event.preventDefault(); 
}); 

どうすればこの問題を解決できますか？

Answer 1

jQuery.loadは非同期関数です。

これは、「#loginBoxフォーム」と一致させようとすると、まだフォームが利用できない可能性があることを意味します。 フォームがロードされた後にコードが実行されるようにするには、コードをロードするコールバック関数として渡す必要があります。

ところで

$('#loginBox').load("form.html", function() { 
    $('#loginBox form').submit(function(event) { 
     event.preventDefault(); 
    }); 
}); 

- あなたはevent.preventDefault（）または偽を返すを使用して天気をあなたのケースでは、それは問題ではありません。彼らはあなたのフォームが提出されることを妨げます。 （event.preventDefault() vs. return false参照）

Answer 2

デフォルトの動作を防止するために、falseを返し追加：

$('#loginBox form').submit(function(event) { 
    return false; 
}); 

Answer 3

$('#loginBox form').submit(function(event) { 
return false; 
});