0

フォームがあり、Ajax で 1 回送信できます。応答としてもフォームが表示され、古いものに取って代わります。しかし、送信ボタンを押すと、フォームは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>

これも戻ってきますが、ボタンの色だけが異なります。

4

2 に答える 2

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;
});
于 2013-04-29T17:20:43.643 に答える
-1

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() [このメソッドが呼び出された場合、イベントのデフォルト アクションはトリガーされません。]

于 2013-04-29T17:24:45.403 に答える