JS DIV重新加载后，JS按钮不起作用

Question

我希望我已经制定了所有权。 我是编程的新手，正在努力解决问题。

我正在尝试建立自己的电子商务购物车（JS，PHP，HTML）。 一切正常（添加项目，显示项目以及除从cart中删除订单外的所有其他项目）。

现在的问题：我无法从购物车中删除订单。（如果单击按钮，则什么也没有发生）但是如果刷新/重新加载页面。 工作正常。 但是我想删除它而不重新加载页面。 仅使用ajax / js。

我认为这可能是因为当我添加新商品时，我正在重新加载购物车div，那可能是那里的问题吗？

我不知道您需要多少代码。 我会尽力而为。

<!-- Shopping Cart MODAL -->
<div class="modal fade shoppingCartModal" id="shoppingCartModal" class="modal" style="margin-top:40px;">
    <div class="modal-dialog modal-lg" style="background-image: url('/Web/Images/ACP/background.gif');">
        <div class="modal-content">
            <div class="container">
                <?php $shop->shoppingCart(); ?>
            </div>
        </div>
    </div>
</div>
<!-- END OF Shopping Cart MODAL -->

这是shoppingCart函数：

public function shoppingCart(){
    try{

        $session_id = session_id();

        ?>
        <table id="cart" class="table table-hover table-condensed">
        <thead>
        <tr>
            <th style="width:50%">Product</th>
            <th style="width:10%">Price</th>
            <th style="width:8%">Quantity</th>
            <th style="width:22%" class="text-center">Subtotal</th>
            <th style="width:10%"></th>
        </tr>
        </thead>
        <?php

        $stmt = $this->conn->prepare("SELECT * FROM shop_shoppingcart WHERE session_id='$session_id'");
    $stmt->execute();
    $result = $stmt->fetchAll();

        $total = 0;

        foreach ($result as $order){

            $item_id = $order['item_id'];

            $stmt = $this->conn->prepare("SELECT * FROM shop_items WHERE id='$item_id'");
        $stmt->execute();
        $result = $stmt->fetchAll();

            foreach ($result as $item){
            ?>
        <tbody id="cart_item_<?php echo $item['id']; ?>">
            <tr>
                <td data-th="Product">
                    <div class="row">
                        <div class="col-sm-2 hidden-xs"><img src="../Web/<?php echo $order['item_image']; ?>" alt="..." class="img-responsive"/></div>
                        <div class="col-sm-10">
                            <h4 class="nomargin"><?php echo $order['item_name']; ?></h4>
                            <p>Color: <?php echo $order['item_color']; ?></br> Size: <?php echo $order['item_size']; ?></p>
                        </div>
                    </div>
                </td>
                <td data-th="Price">
                    <?php if($item['saleprice'] > 0.00){
                        ?><span style="color:green"><?php echo $item['saleprice']; ?></span></br><?php
                        ?><s><span style="color:red"><?php echo $item['price']; ?></span></s></br><?php
                    }else{
                        ?><span style="color:green"><?php echo $item['price']; ?></span></br><?php
                    } ?></td>
                <td data-th="Quantity">
                    <p style="text-align:center"><?php echo $order['item_quantity']; ?></p>
                </td>
                <?php $itemTotal = $order['item_price'] * $order['item_quantity']; ?>
                <td data-th="Subtotal" class="text-center"><?php echo $itemTotal; ?></td>
                <td class="actions" data-th="">
                    <button id="delete_order_<?php echo $order['id']; ?>" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>
                </td>
                <?php $total += $itemTotal; ?>
            </tr>
        </tbody>

        <script>
            $(function(){
                $("#delete_order_<?php echo $order['id']; ?>").click(function(){
                    $.ajax(
                        { url: "Shop.php?delete_item=true?action=select&id=<?php echo $order['id'];?>",
                            type: "get",
                            success: function(result){
                                document.getElementById('cart_item_<?php echo $item['id']; ?>').style.display = 'none';
                                $('#cart_total').load(document.URL +  ' #cart_total');
                                $('#navigation').load(document.URL +  ' #navigation');
                            }
                        });
                    });

            });
        </script>

        <?php } } ?>
        <tfoot>
            <tr>
                <td><a href="#" onclick="continueShopping()" class="btn btn-warning"><i class="fa fa-angle-left"></i> Continue Shopping</a></td>
                <td colspan="2" class="hidden-xs"></td>
                <td class="hidden-xs text-center"><strong id="cart_total">Total: <?php echo $total; ?></strong></td>
                <?php if($total > 0.00){ ?><td><a href="#" class="btn btn-success btn-block" id="cart_checkout">Checkout <i class="fa fa-angle-right"></i></a></td><?php } ?>
            </tr>
        </tfoot>
    </table>

    <script>
        var shoppingCartModal = document.getElementById('shoppingCartModal');

        function continueShopping(){
            $(shoppingCartModal).modal('hide');
        }
    </script>

    <?php
    }
    catch(PDOException $e)
    {
        echo $e->getMessage();
    }
}

如果我不刷新页面，则该按钮不起作用。

<button id="delete_order_<?php echo $order['id']; ?>" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>

可能这可能是代码，为什么它不起作用！？ （添加新项目时刷新shoppingCartModal的脚本）

    <script>
        function AddToCart_<?php echo $item['id'];?>(){

            var post_url = "/Web/Pages/Shop/Shop.php";
            var request_method = "post";
            var form_data = $(Form_AddToCart_<?php echo $item['id'];?>).serialize();

            $.ajax({
                url : post_url,
                type: request_method,
                data : form_data
            }).done(function(result){
                $('#navigation').load(document.URL +  ' #navigation');
                $('#shoppingCartModal').load(document.URL +  ' #shoppingCartModal');
                $('.shop_item_<?php echo $item['id'];?>').modal('hide');
                document.getElementById('result-box').innerHTML += '<div class="alert alert-success alert-dismissible fade in" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>Item has been added to Your shopping cart!</div>';
                });

        }
        </script>

这行：

$('#shoppingCartModal').load(document.URL +  ' #shoppingCartModal');

Answer 1

如下更改您的删除按钮的代码。 代码说明如下。 将此脚本放到您的页面上，而不是通过AJAX加载的脚本

<script>
    function deleteOrder(o) {
        var order_id = $(o).data("order-id");
        var item_id = $(o).data("item-id");
        $.ajax({
           url: "Shop.php?delete_item=true?action=select&id="+item_id+"&order_id="+order_id,
           type: "get",
           success: function(result){
               var item_id = result.item_id; //this should be returned from result
               $('#cart_item_'+result.item_id+').style.display = 'none';
               $('#cart_total').load(document.URL +  ' #cart_total');
               $('#navigation').load(document.URL +  ' #navigation');
           }
        });
    }
</script>

和按钮的代码

<button id="delete_order_<?php echo $order['id']; ?>" data-order-id="<?php echo $order['id']; ?>" data-item-id="<?php echo $item['id']; ?>" onclick="deleteOrder(this);" class="btn btn-danger btn-sm"><i class="fa fa-trash-o"></i></button>

说明

data-order-id="<?php echo $order['id']; ?>" data-item-id="<?php echo $item['id']; ?>"添加必要的订单ID并您的按钮的item id属性，以便我们可以在deleteOrder函数中使用它们。 deleteOrder应该放在您的页面上，或放在您的一个JavaScript文件中。 只要页面加载时在那里就没有关系。 onclick="deleteOrder(this);" 将在单击时触发该函数，并在单击时将其按钮属性作为函数的参数发送。

var order_id = $(o).data("order-id"); 获取我们在按钮上设置的订单ID，以便可以使用它的AJAX请求。

如果您省略

var item_id = result.item_id; //this should be returned from result
$('#cart_item_'+result.item_id+').style.display = 'none';

从您的ajax中，将调用ajax，但不会正确隐藏必要的行。 为了解决这个问题，文件Shop.php应该以json格式返回必要的id，例如echo json_encode(array('item_id' => $_GET['id']));