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']));