PHP никогда не получает вложенные данные jQuery $ .post

Question

Я пытаюсь отправить данные простой формы с моей индексной страницы в функцию PHP, checklogin.php. Я нахожу, что никакие данные, сериализованные или даже прямые входные данные не проникают в функцию PHP. Я знаю, что функция jQuery вызывается, и я также знаю, что PHP-файл вызван, потому что я поставил различные функции сообщений.

Когда я отправляю данные непосредственно из формы с помощью action="checklogin.php" $ _POST данные правильно получены, и я могу обработать их. Однако при использовании jQuery для перехвата формы submit данные не принимаются.

Следует отметить, что фактическая форма входа в систему HTML вставляется с другой страницы, что позволяет мне работать с несколькими страницами вместо одного большого индексного файла.

Форма - login.php

<form id="loginform" name="loginform" method="post"> 
    <td> 
     <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> 
      <tr> 
       <td colspan="3"><strong>Member Login</strong></td> 
      </tr> 
      <tr> 
       <td width="78">Username</td> 
       <td width="6">:</td> 
       <td width="294"><input name="username" type="text" id="username"></td> 
      </tr> 
      <tr> 
       <td>Password</td> 
       <td>:</td> 
       <td><input name="password" type="text" id="password"></td> 
      </tr> 
      <tr> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
       <td><input type="submit" name="Submit" value="Login"></td> 
      </tr> 
     </table> 
    </td> 
</form> 

Отправить событие крюк - Index.php

$(document).ready(function() {     
    $.post("login.php", function(data) { // retrieve login form from other page. 
     $("#page5").html(data); 
     $('#loginform').submit(function() { 
      event.preventDefault(); 
      var formData = $(this).serialize(); 

      console.log("Form Data: " + formData); // this is not blank 

      $.post("checklogin.php", formData, function(data) { 
       // post-login actions 
      }) 

      }); 
     }); 
    }) 
}); 

checklogin.php (временно, пока не будет решена проблема)

<?php 
    print_r($_POST); 
?> 

Как я уже сказал, даже прямой ввод, такой как «username = test $ password = blah» вместо «formData», приводит к пусту массиву $ _POST. Я также пытался использовать эквивалентный почтовый вызов ajax без везения.

JavaScript Console Output

// console.log line above $.post 
Form Data: username=test&password=blah 

// Result from PHP print_r 
Array 
(
) 

Answer 1

Использование .on()

При добавлении элементов динамически вы не можете связать события непосредственно к ним .so вы должны использовать Event Delegation.

$(document).on('submit','#loginform',function() { //code here } 

или лучше использовать

$('#page5').on('submit','#loginform',function() { //code here } 

Синтаксис

$(elements).on(events, selector, data, handler);