フォームからの送信時にAJAX要求が登録されていません

Question

私はHTMLのフォームのAJAXサブミットハンドラを持っていますが、サブミットをクリックすると、AJAXリクエストは登録されません。しかし、まったく同じことをしているソースから直接コピーされたので、私は構文に何が間違っているかを見ることはできません。

<form id="initialPost" action="initialProgress.php" method="post"> 
      <table class="progressTable2"> 
      <tr> 
       <td>Chosen a city? 
        <input type="checkbox" name="foundCity" value="cityIsChecked" /> 
       </td> 
       <td>Found accommodation? 
        <input type="checkbox" name="foundAccom" value="accomIsChecked"/> 
       </td> 
      </tr> 
      <tr> 
       <td>Set up a bank account? 
        <input type="checkbox" name="foundBank" value="bankIsChecked"/> 
       </td> 
       <td>Sorted CAF? 
        <input type="checkbox" name="gotCaf" value="cafIsChecked"/> 
       </td> 
      </tr> 
      <tr> 
       <td colspan='2'> 
        <input type="submit" class="popupButton"/></submit> 
       </td> 
      </tr> 
      </table> 
     </form> 

とを更新JS ：ここ

はを更新されたHTML ある アラートは、それが機能に入るかどうかを確認するためにそこにあり、それは

を呼び出すことはありません。

$(window).ready(function(){ 
     $("#initialPost").submit(function(e) { 
       alert("submitRegistered"); 

       e.preventDefault(); // avoid to execute the actual submit of the form. 
       var url = "initialProgress.php"; // the script where you handle the form input. 
       console.log($("#initialPost")); 

       $.ajax({ 
       type: "POST", 
       url: url, 
       data: $("#initialPost"), 
       success: function(data) { 
        checkboxFunction(); 
        window.location = '#'; 
       } 
       }); 

     }); 
    }); 

アイデア？

Answer 1

jqueryがheadセクションにロードされている場合は、ドキュメントの準備が整った状態でコードを記述する必要があります。 は以下のスニペット以下

$(document).ready(function(){ 

    $("#initialPost").on('submit',function(e) { 
      alert("submitRegistered"); 

      e.preventDefault(); // avoid to execute the actual submit of the form. 
      var url = "initialProgress.php"; // the script where you handle the form input. 
      console.log($("#initialPost")); 

      $.ajax({ 
       type: "POST", 
       url: url, 
       data: $("#initialPost"), 
       success: function(data) 
       { 

        checkboxFunction(); 
        window.location='#'; 
       } 
      }); 

    }); 

}); 

を見たことは、あなたのフィドル https://jsfiddle.net/rajeshsnadar/rm1pgLt3/