jQueryのは、ページの更新と、フォームポストを動作していないアヤックス

Question

I持って、次のHTMLコード：（それはdiv要素の中に、AJAXを経由してロードされる）

（関係ない部分を切り取り）だから、

<form id='addContactForm' method='post' action='/contact/create/'> 
    <div> 
     <input type="image" name="submit" id="addContactSubmit" src="/images/add-small.png" style="width: auto; vertical-align: bottom;"> 
    </div> 
</form> 

<script> 
    $('#addContactSubmit').click(function() { 
     alert('got here'); 
     $.ajax({ 
      type: 'POST', 
      url: '/contact/create/', 
      data: $("#addContactForm").serialize(), 
      success: function (data, status, xhttp) { 
       if (data) { 
        alert('Got Data'); 
       } else { 
        alert('No Data'); 
       } 
      }, 
      dataType: html 
     }); 
     return false; 
    }); 
</script> 

<image>をクリックすると、実際にフォームがポストされ、ページが更新されます。私は問題がjqueryがロードされていなかったことを述べた別の記事を読んで、一度その問題を修正してロードしました。しかし、この場合、jqueryがロードされていることを通知する警告が表示されますが、$.ajax部分が実行されていない（または問題がある）ようです。 $.ajax部分を削除すると、アラートが表示され、ページは送信されず再読み込みされません。

元々、このフォームhtmlはメインページのajax呼び出しで読み込まれていると述べていますが、失敗したajax投稿とは何か関係があるのでしょうか？注意警告（「データが見つかりました」）または（「データがありません」）、警告が「ここにあります」

すべてのinsiteは素晴らしいでしょう。ありがとうございました

別のメモ、私は火かき棒でエラーを取得しています。

Answer 1

フォームを自動的にポストバックし、ajaxスクリプトを実行するサブミット入力です。

私がやったすべてが、その後e.preventDefaultを（呼び出して、あなたのjQueryの関数にクリックイベントを渡すです

<script> 
    $('#addContactSubmit').click(function (e) { 
     e.preventDefault(); 
     alert('got here'); 
     $.ajax({ 
      type: 'POST', 
      url: '/contact/create/', 
      data: $("#addContactForm").serialize(), 
      success: function (data, status, xhttp) { 
       if (data) { 
        alert('Got Data'); 
       } else { 
        alert('No Data'); 
       } 
      }, 
      dataType: html 
     }); 
     return false; 
    }); 
</script> 

...これを試してみてください）が、この場合のデフォルトのDOMのクリックイベントの実行を停止します送信ボタンはポストバックです。

これは理にかなっていると思っています。