Ajaxの成功機能のみ最初のクリックの値を更新

Question

は、私は、HTMLの表は、以下与えているオーケー：

<table class="table"> 
    <thead> 
     <tr> 
      <th>Product</th> 
      <th>Quantity</th> 
      <th colspan="2">Total</th> 
     </tr> 
    </thead> 
    <tbody id="cart_table"> 
     ... 
    </tbody> 
    <tfoot> 
     <tr> 
      <th colspan="2">Total</th> 
      <th colspan="2">$446.00</th> 
     </tr> 
    </tfoot> 
</table> 

私は、ボタンのクリックごとに明確なtbodyの値を追加し、多次元のセッションでTBODYを補充するために、AJAXを使用していますアレイ。これは、第一ターンのために正常に動作しますが、2回目のクリックでは動作しません

私のjqueryのコードは、私は私のセッション値が更新されるチェックインした

<script> 
    $(document).ready(function(){ 
     $('.addToCart').on('click',function(e){ 
      $("#cart_table").empty(); 
      var price = $(this).attr('data-price'); 
      var item = $(this).attr('data-itemname'); 

       e.preventDefault(); 
       $.ajax({ 
       method : "POST", 
       async: false, 
       url: "./php/addToCart.php", 
       dataType : "json", 
       data : {item:item,price:price}, 
       success : function(response){ 
        $("#cart_table").empty(); 
        <?php 
        $i = 0; 
       foreach ($_SESSION["cart_array"] as $each_item): 
       $item = $each_item['item']; 
       $price=$each_item['price']; 
       $quantity=$each_item['quantity']; 
        ?> 
        $('#cart_table').append("<tr><td><?php echo $item; ?></td><td><?php echo $quantity; ?></td><td><?php echo $price; ?></td><td><a href='#'><i class='fa fa-trash-o'></i></a></td></tr>"); 
       <?php 
       endforeach; 
       ?> 
       } 

       });  

     }); 
    }); 
</script> 

以下の通りです。ただし、変更は最初のクリック以外はテーブルに表示されません。

Answer 1

コメントで指摘されているように、PHPはサーバーサイドの言語で、変更を反映するためにページをリロードする必要がありますが、リロードすることはありません（または、リロードする必要はありません）。

ページがロードされる最初の時間のために、現在のデータは、すでにあなたのJavaScript関数に存在することになるので、それは最初の時間のために働く：

右ここに：

$('#cart_table').append(<?php echo "<tr><td>".$item."</td><td>".$quantity."</td><td>".$price."</td><td><a href='#'><i class='fa fa-trash-o'></i></a></td></tr>";?>); 

だから何がここで起こります最初にクリックすると、Ajaxが実行され、成功関数が呼び出されます。この関数は、ページがリロードされない限り更新されないため、既に提示されたデータを追加します。したがって、クリックするたびにセッションが更新され、成功関数も呼び出されますが、テーブルには変更が反映されません。

PHPコードをJavaScriptに変更する必要があります（ここではあなたの応答はJSONと仮定していますが、次のコードはボックスの外で動作しないことに注意してください。それをテストしていませんでした。）

<script> 
$(document).ready(function(){ 
    $('.addToCart').on('click',function(e){ 
     $("#cart_table").empty(); 
     var price = $(this).attr('data-price'); 
     var item = $(this).attr('data-itemname'); 

      e.preventDefault(); 
      $.ajax({ 
      method : "POST", 
      async: false, 
      url: "./php/addToCart.php", 
      dataType : "json", 
      data : {item:item,price:price}, 
      success : function(response){ 
       $("#cart_table").empty(); 

       //New JavaScript code, make appropriate changes. 
       jQuery.each(response, function(key, row) { 
        $('#cart_table').append("<tr><td>" + row.item + "</td><td>" + row.quantity + "</td><td>" + row.price + "</td><td><a href='#'><i class='fa fa-trash-o'></i></a></td></tr>"); 
       }); 
      } 

      });  

    }); 
});