Javascript Ajax响应只工作一次-使用PHP的购物车

我在一辆购物车上工作。我首先将产品添加到购物车。然后使用Ajax更改更改时的项目数量。这个过程在第一次更改时非常有效。但当我再次改变数量时，部分不会刷新

这里是显示购物车详细信息的编码

        <?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成功后（使用html（）方法）更改DOM。元素将被替换为新元素，因此您的事件将被删除

另外，您的另一个修复方法是仅对也已删除的数量元素应用更改。试试像这样的东西

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

我发现了两个问题：



1.始终围绕
DOM
相关事件使用
jQuery
的文档准备功能：


2.您的事件在实时生成的
DOM
元素上不起作用：


将其更改为：

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

这还将向类为“quantity”的
DOM
元素添加事件侦听器，该类元素是在首次加载文档后生成的。
这不是最佳解决方案，但至少可以作为一种变通方法。您可以在代码中执行以下操作：

<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>


$（'.quantity'）.change（选择change）；
函数selectChange（）
{
var ID=$（this.attr（“ID”）；
var sid=ID.split（“数量”）；
var New_ID=sid[1]；
变量数量=document.getElementById（ID）.value；
var URL='updatecart.php'；
var dataString='id='+New_id+'&qty='+qty；
$.ajax({
键入：“获取”，
url:url，
数据：dataString，
cache:false，
成功：功能（数据）{
$（'#cart'+New_ID）.html（数据）；
$（'.quantity'）.change（选择change）；
警报（数据）；
} 
});
}

我假设您的“选择”被删除并重新附加到ajax调用成功回调中，因此，事件不会被绑定多次。
我认为您需要转到一个不太复杂的项目来自学ajax。这一个可能不是一个好的跳转点。我尝试了这个，但不起作用。这不是你需要做的唯一修复。请检查我的第一段。@Adrian在Ajax成功后我到底要做什么。正如我所说，我对Ajax感到不舒服。我已经参考了很多Ajax教程，但仍然没有解决这个问题。我不知道。你想做什么？你想清除表格吗？是否要使用结果更新表单内容？这与AJAX无关。在success回调中，您可以根据给定的结果继续修改DOM。只是不要使用html（）函数，因为它会破坏内容及其所有事件。不，在做了像这样的更改之后，Ajax停止工作。我已经听从了你的建议。但仍然没有结果。谢谢你的提示。
$( document ).ready(function() {
     //DOM EVENTS
});

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

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

<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>