使用JQuery Ajax提交表單幾次，無需重新加載頁面

Question

我有一個表單，可以使用Ajax提交一次。因爲迴應也是一種形式，它取代了舊的。但是，當我然後按提交按鈕表單不提交與Ajax和正常的方法。爲什麼？ 這裏我jQuery的代碼：

<script> 
    $(document).ready(function() { 
     $('#ajax_form').submit(function(e) { 
      var form = $('#ajax_form'); 
      var data = form.serialize(); 
      $.post('game/write.php', data, function(response) { 
       console.log(response); 
       $('#power').replaceWith(response); 
      }); 
      return false; 
     }); 
    }); 
</script> 

形式：

<div id="power"> 
<div class="span4"> 
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="1" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form> 
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="4" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form> 
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="7" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form> 
</div> 
<div class="span4"> 
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="2" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form> 
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="5" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form> 
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="8" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form> 
</div> 
<div class="span4"> 
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="3" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form> 
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="6" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form> 
    <form action="game/write.php" id="ajax_form" method="post"><input type="hidden" value="9" name="button"><button type="submit" class="btn btn-block btn-success"><img src="images/null.png"></button></form> 
</div> 

這對於自帶也回來了，只有Buttoncolors是不同的。

Answer 1

你需要事件代表團 -

$(document).on('submit','#ajax_form',function(e) { 

試試這個 -

$(document).on('submit','#ajax_form',function(e) { 
    var form = $('#ajax_form'); 
    var data = form.serialize(); 
    $.post('game/write.php', data, function(response) { 
     console.log(response); 
     $('#power').replaceWith(response); 
    }); 
    return false; 
}); 

Answer 2

event.preventDefault（）

文檔：http://api.jquery.com/event.preventDefault/

現在更新你的代碼像波紋管

<script> 
$(document).ready(function() { 


    $('#ajax_form').click(function(event) {//use click instead of submit 

    event.preventDefault() // then use even.preventDefault() 

    var form = $('#ajax_form'); 
    var data = form.serialize(); 
    $.post('game/write.php', data, function(response) { 
     console.log(response); 
     $('#power').replaceWith(response); 
    }); 
    return false; 
}); 

}); 
</script> 

add event.preventDefault（）[如果調用此方法，則不會觸發該事件的默認操作。 ]