jQueryは動的にロードされたコンテンツに$ .ajaxを使用できません

Question

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

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

しかし、フォームが正常に送信され、関数の中で与えられているものを、次ずに、それは（ - 提出とAJAXを使用してデフォルトを防ぐ）です。つまり、ロードされたコンテンツはDOM内では認識されないか、スクリプトはそれを読み取れません。私は一度だけコンテンツをロード：

$(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> 

Answer 1

変更

$("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'); 

：あなたがにフォームをロードするコードを変更する必要がありますように

は、それはまた見えます。

Answer 2

あなたは（.on使用して動的な要素の上に委任する必要があり）方法

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

Answer 3

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

Answer 4

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

、それはコールバックを使用して​​完了、実行されますので、その最初のスクリプトを移動します。また、

$(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インタプリタがその最初の行の後にセミコロンを挿入することがあり、コードを壊す可能性があるためです。

詳細はAutomatic Semicolon InsertionのJavascript Gardenページを参照してください。