如何從AJAX加載頁面

調用

的index.php
的login.php

從index.php文件進行Ajax調用，並得到在login.php中

的index.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Home Page</title> 
    <script src="./js/jquery.js"></script> 
     <script> 
     $(document).ready(function(e) { 
      $("a").click(function(e) { 
       var model= $.ajax({ 
        url: $(this).attr('href'), 
        cache:false, 
        type: "GET", 
        dataType:"json" 
       }); 
       model.done(function(data){ 
        $("#body").html(data.bodyy); 
        e.preventDefault(); 
       }); 
      });  
       $("form").submit(function(e) { 
          alert("Triggered"); 
       }); 
     }); 

    </script> 



    <body> 
    <div id="body"><a href="login.php">Login</a> 
    </div> 
</body> 
</html>

這裏是Ajax頁面：login.php中

<?php 
    $body='<form class="form-signin" action="#" method="post" id="login"> 
     <h2 class="form-signin-heading">Please sign in</h2> 
     <input type="text" class="input-block-level" placeholder="username" name="username"> 
     <input type="password" id="password" class="input-block-level" placeholder="Password" name="password"> 
     <label class="checkbox"> 
      <input type="checkbox" value="remember-me"> Remember me 
     </label> 
     <table><th> 
     <button class="btn btn-large btn-primary" type="submit">Sign in</button> </th><th width="5%"> 
     <h3> or </h3></th><th> 
     <a class="btn btn-large btn-primary" href="./registration.php" >Register</a></th></table> 
     </form> 
     <script> 
     </script> 
'; 
    $data= array(
     'bodyy' => $body, 
     ); 
     echo json_encode($data); 
?>

當我提交登錄表單$("form").submit(function(e)不叫。我收到這個問題，當我從ajax加載頁面調用這個頁面

來源

2013-04-18 Sriram G

如果您嘗試在用戶單擊登錄鏈接時顯示登錄表單;你可能會更好地創建表單部分，並簡單地用CSS隱藏它，然後通過使用事件處理程序單擊來顯示它。然後，您可以專注於使用AJAX執行實際的登錄驗證（s） – Dogoferis

這是因爲你在jQuery執行時綁定到窗體。對於「延遲」事件綁定（這意味着您要綁定到所有表單，而不僅僅是綁定時在頁面上的那些表單），您必須綁定到父元素，然後指定一個子選擇器來觸發處理程序，如：

$("body").on("click", "form", function(e) {});

這將綁定在身上的點擊，但只有當一個形式，是身體的孩子被點擊（使用更具體的父元素可以是有益的，如果你有形式火處理程序在不應該做這個動作的身體中）。

當在jQuery中綁定事件時，請確保您僅執行綁定時綁定到頁面上存在的元素，否則將會中斷事件綁定。請注意，如果您需要「移動」元素而不打破綁定事件，則應該使用jQuery的detach函數而不是remove。 detach函數從頁面中刪除該元素，但保留了該元素的事件綁定信息，以便您將其放置在其他位置而不更新事件函數（或處理引用）。

來源

2013-04-18 20:34:22

哇工作，我對此有所瞭解，謝謝 –

如何從AJAX加載頁面

回答

相關問題