0

ログインフォーム（AJAX）を有効にして作業していました。使用者がリンクをクリックすると、フローティングモーダルとしてそのログインボックスが表示されます。そのログインボックスのコンテンツは、jQueryの$（）。load関数を使用して別のページから読み込まれます。リンクをクリックすると、ログインボックスが読み込まれます。しかし、私がそのフォームにAJAX送信を実装したとき：

$(document).ready(function(){
    $("form#loginbox").submit(function(e){ e.preventDefault(); /*AJAX function here*/ });
});

ただし、フォームは、関数で指定された内容に従わずに、通常どおりに送信されます。つまり、（デフォルトの防止-送信してAJAXを使用します）。つまり、ロードされたコンテンツがDOM内で考慮されない、またはスクリプトがそれを読み取ることができないということですか？コンテンツを1回だけロードします。

$(document).ready(function(){
    if($("#loadedform").html() == "")
    { $(this).load('/load/login.html'); }
    $(".login-modal').slideDown('slow');
});

構造：

<div class="login-modal"><div id="loadedform"></div></div>

ロードするコンテンツ：

<form id="loginbox" method="post" action="xyz.html">
<!-- INPUT Boxes and Submit Button -->
</form>
4

4 に答える 4

2

変化する

$("form#loginbox").submit(function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

に

$('#loadedform').on("submit", "form#loginbox", function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

または、1.7より前のバージョンを使用している場合：

$('#loadedform').delegate("#loginbox", "submit", function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

これは、ページが読み込まれるときにイベントが登録されるため、フォームが読み込まれるときにイベントが添付されないためです。この変更により、イベントがdomの上位レベルに登録されるため、新しいコンテンツも機能します。

また、フォームをロードするコードを次のように変更する必要があるようです。

if($("#loadedform").html() == "") { 
    $("#loadedform").load('/load/login.html'); 
}
$(".login-modal').slideDown('slow');

そうしないと、適切な場所にロードできません。

于 2012-03-23T08:39:40.347 に答える
1

を使用して取得されたページ上のスクリプト.load()は実行されないため、AJAXを介してフォームを送信しようとする最初のスクリプトは実行されません。

.load()代わりに、コールバックを使用して、完了時に実行されるように最初のスクリプトを移動します。

$(document).ready(function(){
    if($("#loadedform").html() == "") { 
         $(this).load('/load/login.html', function() {
             $("form#loginbox").submit(function(e){ e.preventDefault(); /*AJAX function here*/ });
         }); 
    }
    $(".login-modal').slideDown('slow');
});

また、Javascriptのように角かっこスタイルを使用しないようにしてください。

// some statement that begins a block here
{ doStuff(); }

これは、Javascriptインタープリターが最初の行の後にセミコロンを挿入することがあり、コードが破損する可能性があるためです。

詳細については、JavascriptGardenページの自動セミコロン挿入のセクションを参照してください。

于 2012-03-23T08:44:15.923 に答える
0

.on（）メソッドを使用して動的要素を委任する必要があります

$(document).on("submit","#loginbox", function() {
 e.preventDefault(); 
 /*AJAX function here*/
});
于 2012-03-23T08:37:11.463 に答える
0

e.preventDefault現在のイベントをキャンセルできる場合は停止またはキャンセルしますが、送信イベントは引き続きDOMに伝播し、送信が発生する可能性があります。ボタンのデフォルト機能を実際に置き換える場合は、両方e.preventDefaultを実行するか、e.stopPropagationまたは単に実行することができますreturn false。

于 2012-03-23T08:40:05.537 に答える