Ajax Response работает только один раз - Корзина с помощью PHP

Question

Я работаю над корзиной покупок. Я сначала добавляю товар в корзину. Затем используйте Ajax для изменения элемента Quantity On Change. Этот процесс отлично работает на First Change. Но когда я снова меняю количество, часть не обновляется.

Здесь кодирование для отображения Подробно

 <?php 
     $session_id = $_SESSION["session_id"]; 
     $query = "select c.cart_id, c.item_quantity, p.category_name, p.product_thumb, p.reduced_price from cart as c inner join category as p on c.category_id = p.category_id where c.session_id = '$session_id'"; 

     $select_cart = mysqli_query($mysqli, $query); 
     if (mysqli_num_rows($select_cart) > 0) 
     { 
     ?> 
     <table> 
      <tr> 
       <th>Item</th><th>Item Detail</th><th>Quantity</th><th>Price</th><th>Sub Total</th> 
      </tr> 
      <?php 
      while ($result_cart = mysqli_fetch_object($select_cart)) 
      { 
      ?> 
      <tr id="cart<?php echo $result_cart->cart_id; ?>"> 
       <td width="100" align="center"><img src="images/products/<?php echo $result_cart->product_thumb; ?>" width="50" /></td> 
       <td><?php echo $result_cart->category_name; ?><br /><?php echo $result_cart->product_name; ?></td> 

       <td width="50" align="center"> 

        <select class="quantity" id="quantity<?php echo $result_cart->cart_id; ?>" > 
         <?php 

         for ($i = 1; $i <= 10; $i++) 
         { 

         ?> 
         <option value="<?php echo $i; ?>" <?php if ($result_cart->item_quantity == $i) { echo "selected"; } ?>><?php echo $i; ?></option> 
         <?php 
         } 
         ?> 

        </select> 

       </td> 

       <td width="75" align="center">$<?php echo $result_cart->reduced_price; ?></td> 
       <td width="100" align="center">$<?php echo $result_cart->item_quantity * $result_cart->reduced_price; ?> 
       <a title="Delete" href="delete-cart.php?id=<?php echo $result_cart->cart_id; ?>" class="delete"></a></td> 

      </tr> 
      <?php 
      } 
      ?> 
     </table> 
     <?php 
     } 
     else 
     { 
     ?> 
     <p>Cart is Empty..!</p> 
     <?php 
     } 
     ?> 

И это скрипт Ajax, используя на той же странице

<script type="text/javascript"> 
$('.quantity').change(function() 
{ 
var ID = $(this).attr("id"); 
var sid=ID.split("quantity"); 
var New_ID=sid[1]; 

var QTY = document.getElementById(ID).value; 

var URL='updatecart.php'; 
var dataString = 'id=' + New_ID +'&qty='+ QTY; 


$.ajax({ 
type: "GET", 
url: URL, 
data: dataString, 
cache: false, 
success: function(data){ 
    $('#cart'+New_ID).html(data); 
    alert (data); 

} 
}); 
}); 
</script> 

И вот код, где я обновляю Данные в базу данных updatecart.php.

<?php 
include('admin/includes/config.php'); 

if(isset($_GET['id'])) { 

$cart_id = ($_GET['id']); 
$item_quantity = ($_GET['qty']); 

mysqli_query($mysqli, "update cart set item_quantity = '$item_quantity' where cart_id = '$cart_id'"); 

// Loop through the products and output HTML for JavaScript to use 
?> 
<?php 
$query = "select c.cart_id, c.item_quantity, p.category_name, p.product_thumb, p.reduced_price    from cart as c inner join category as p on c.category_id = p.category_id where c.cart_id = '$cart_id'"; 
$select_cart = mysqli_query($mysqli, $query); 
$result_cart = mysqli_fetch_object($select_cart); 
?> 

       <td width="100" align="center"><img src="images/products/<?php echo $result_cart->product_thumb; ?>" width="50" /></td> 
       <td><?php echo $result_cart->category_name; ?><br /><?php echo $result_cart->product_name; ?></td> 

       <td width="50" align="center"> 

        <select class="quantity" id="quantity<?php echo $result_cart->cart_id; ?>" > 
         <?php 

         for ($i = 1; $i <= 10; $i++) 
         { 

         ?> 
         <option value="<?php echo $i; ?>" <?php if ($result_cart->item_quantity == $i) { echo "selected"; } ?>><?php echo $i; ?></option> 
         <?php 
         } 
         ?> 

        </select> 

       </td> 

       <td width="75" align="center">$<?php echo $result_cart->reduced_price; ?></td> 
       <td width="100" align="center">$<?php echo $result_cart->item_quantity * $result_cart->reduced_price; ?> 
       <a title="Delete" href="delete-cart.php?id=<?php echo $result_cart->cart_id; ?>" class="delete"></a></td> 

<?php 
} 
?> 

Мне нужно, чтобы автоматически рассчитать Итого Цену и общие цены на корзину Изменения количества отдельных элементов. Я новичок в Ajax.

Это похожие вопросы.

1. Ajax form only work one time

2. Ajax Request works only once - code Ignitor

После ссылаюсь на эти вопросы, я пытался использовать что-то вроде этого $('.quantity').on("change", "select", function() { Но не получает результата.

Пожалуйста, помогите мне. Мне нужно изменить всю структуру кодирования.

Answer 1

Вы меняете DOM после успеха ajax (используя метод html()). Элемент заменяется новым, поэтому ваши события удаляются.

Кроме того, ваше другое исправление применяется только к изменению количества элементов, которые также были удалены. Попробуйте что-то вроде

$(document).on("change", ".quantity", function() {} 

Answer 2

я нашел 2 вопроса:

1. всегда использовать jQuery «s документа готовые функции вокруг DOM события, связанные с:

$(document).ready(function() { 
    //DOM EVENTS 
}); 

2. Ваше мероприятие не работает на живые DOM элементов:

$('.quantity').change(function(){}); 

изменить его:

$(document).on('change', '.quantity', function(){}); 

это также добавит обработчики событий DOM элементов с классом «количество», которые были сформированы после загрузки документа в первый раз.

Answer 3

Это не лучшее решение, но, по крайней мере, оно может работать как обходное решение.Вы можете сделать следующее в вашем коде:

<script type="text/javascript"> 
$('.quantity').change(selectChange); 
function selectChange() 
{ 
var ID = $(this).attr("id"); 
var sid=ID.split("quantity"); 
var New_ID=sid[1]; 

var QTY = document.getElementById(ID).value; 

var URL='updatecart.php'; 
var dataString = 'id=' + New_ID +'&qty='+ QTY; 


$.ajax({ 
type: "GET", 
url: URL, 
data: dataString, 
cache: false, 
success: function(data){ 
    $('#cart'+New_ID).html(data); 
    $('.quantity').change(selectChange); 
    alert (data); 

} 
}); 
} 
</script> 

Я предполагаю, что ваш «выбрать» удаляется и повторно добавляется на успех обратного вызова Ajax вызова, поэтому события не будут переплетены более чем один раз.