提交從產生一個jQuery從

Question

一個頁面dslogin.php從側面板裝入

<div id="workarea"> </div> 

它加載頁面的鏈接是非常簡單的：

<a id=\"ds_action\" href=\"javascript:outputResults('dslogin.php','workarea','db=$k');\"> Connect to $k</a> 

但dslogin時得到$ _GET [「db」]它生成了一個表格，它顯示在workarea div中。現在的形式也很簡單：

function getCredentials($db,&$u,&$p) 
{ 
echo "Connecting to Database $db: <br/>\n"; 
echo "<form id=\"dblogin\" action=\"dsconnect.php\" method='post'> \n" ; 
echo" Please enter your username and password if you wish. <br/> \n" ; 
echo "Username: <input type='text' name='username' > \n " ; 
echo "Password: <input type='password' name='password' > \n" ; 
echo "<input type='submit' value='Login' name='Login'> <br/> \n" ; 
echo "<input type='hidden' value=$db name='database'> <br/> \n" ; 
echo "</form>" ; 
echo "<div id=\"local\"> </div>"; 
} 

一旦用戶提交表單時，應該攔截它在這下面的代碼

<script> 
$(document).ready(function() 
{ 
    $('#dblogin').submit(function() 
    { // catch the form's submit event 
     $.ajax({ // create an AJAX call... 
      data: $(this).serialize(), // get the form data 
      type: $(this).attr('method'), // GET or POST 
      url: $(this).attr('action'), // the file to call 
      success: function(response) { // on success.. 
       $('#local').append(response); // update the DIV 
      } 
     }); 
     return false; // cancel original event to prevent form submitting 
    }); 
    }); 
</script> 

這是不工作的Ajax代碼。我的想法是，當與AJAX腳本的第一次加載頁面：

$(document).ready(function() 
{ 
    $('#dblogin').submit(function() ... 

沒有鏈接到dblogin形式，因爲它尚未加載。

當你點擊提交時，你會得到動作頁面dsconnect.php，而不是將它的輸出附加到表單頁面，就像它應該做的那樣。

有沒有辦法讓這項工作？

Answer 1

將其更改爲代表事件：

$('#{containerid}').on('submit', '#dblogin', function() ... 

我想在你情況下，容器是#workarea雖然它不是那麼清楚。