js DIV重新加载后JS按钮不起作用答案

【问题标题】：JS Button dosn't work after js DIV reloadjs DIV重新加载后JS按钮不起作用
【发布时间】：2018-02-19 20:51:33
【问题描述】：

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

我正在尝试构建自己的电子商务购物车（JS、PHP、HTML）。一切正常（添加商品、显示商品和其他所有内容从购物车中删除订单除外。）

现在的问题：我无法从购物车中删除订单。（如果我点击按钮，什么都不会发生）但是如果我刷新/重新加载页面。它工作正常。但我想删除它而不重新加载页面。仅使用 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 -->

这里是购物车功能：

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

【问题讨论】：

您似乎在 PHP 函数中运行原始 HTML。你会想echo 把所有这些都去掉，或者把你的演示从你的逻辑中分离出来。
@ObsidianAge 抱歉，不太明白您的意思。你能尽快解释一下吗？此刻我是如何理解的。我需要回显我所有的 html 代码吗？
在您最重要的代码中。没有关于删除订单 (delete_order_) 的活动。分享你的完整代码。

标签： javascript php jquery html

【解决方案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 和商品 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']));

【讨论】：