个人中心
gpt4 book ai didi

javascript - 添加和删​​除类似乎会导致 dom 中出现问题

转载 作者：行者123 更新时间：2023-11-28 05:25:31 24 4
gpt4 key购买 nike

我想问这个问题已经有一段时间了，但我不知道怎么问。

所以我有一个正在处理的单页电子商务网站。它的功能是改变div中的html，并通过jquery使用css隐藏和显示div。

我遇到的问题是，有时(并非所有时间)如果我通过 jquery 显示或隐藏一个 div，该 div 将显示，然后就好像整个 dom 重置(屏幕黑屏一段时间第二次回来)，但 dom 没有重置，因为我已经用 console.log 测试了 document.ready 函数，它只触发一次。

这似乎最常发生在关闭购物车或加载产品类别时。

所以很好奇是否有人对为什么会这样做有任何见解。加载产品时，页面有时还会显示加载图标。

html:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>DATique</title>
    <link rel="stylesheet" href="lib/css/styles.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="lib/css/jqm-icon-pack-fa.css"/>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"/>
</head>
<body>
<div id="container" data-role="page" data-theme="b">
    <div id="header" data-role="header">
        <div id="headerGraphic"><img class="menu" src="lib/img/DATique.png" alt="" align=center></div>
        <!-- todo add tagline back in -->
        <div data-role="footer" id="headerTagLine">an adult novelty company</div>
    </div>
    <div id="mainNavBar">
        <div id="mainNav" data-role="navbar">
            <ul>
                <li class="home ui-icon-home">Home</li>
                <li class="about ui-icon-question-circle">About</li>
                <li class="contact ui-icon-envelope">Contact</li>
                <li class="request ui-icon-lightbulb-o">Requests</li>
                <li class="find ui-icon-location-arrow">Find</li>
            </ul>
        </div>
    </div>
    <div id="content" data-role="main" class=''>

        <!-- todo add facebook plugin -->
        <div id="sideBar">
            <div id="sideNav"></div>
        </div>
        <div id="productWindow" class=''></div>
        <div id='cartDiv' class='hidden'></div>
        <div id='shippingDiv' style='max-width:400px'  class='hidden ui-content'>

        </div>

    </div>

    <div data-role="footer" id="footer">
        <ul>
            <li id="addingItem"></li>
            <li class="cartHolder">
                <div class="view">View Cart</div>
                <div class="cartImg"><img src="lib/cartIcon/shopping-cart.png"></div>
                <div class="badge ui-corner-all"></div>
            </li>
        </ul>
    </div>
</div>
<!---->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script src="lib/myScript.js"></script>
</body>
</html>

JavaScript:

$(document).ready(function () {

    showCart();

    var initialLoad = $.post('lib/php/aboutUs.php');
    initialLoad.done(function (data) {
        $('#productWindow').html(data);
    });

    var sideBar = $.post('lib/php/sideNav.php');
    sideBar.done(function (data) {
        $('#sideNav').html(data);
        getBadge();
    });

    /*view cart function*/
    function showCart() {
        var url = 'lib/php/cart.php';
        var getCart = $.post(url);
        getCart.done(function (data) {
            console.log("cart received");
            $('#cartDiv').html(data);
        });
        getCart.fail(function (a, b, c) {
            console.log(b);
        });
        loadCustomerInfo();
    }

    /* get badge count*/
    function getBadge() {
        var url = 'lib/php/getBadge.php';
        var data2 = '';
        var badgeCount = $.post(url, data2, null, 'json');
        badgeCount.done(function (data) {
            $('.badge').html(data.itemCount);
        });
    }

    function loadCustomerInfo() {
        var custInfo = $.post('lib/php/customerInfo.php');
        custInfo.done(function(data) {
            $('#shippingDiv').html(data);
        });
    }

    /*load product from category menu*/
    $('#content').on('click', '.menu', function (event) {
        event.stopImmediatePropagation();
        $('#productWindow').html('retrieving your items.......');
        if (!$('#cartDiv').hasClass('hidden')) {
            $('#cartDiv').addClass('hidden');
            $('#productWindow').removeClass('hidden');
        }
        if(!$('#shippingDiv').hasClass('hidden')) {
            $('#shippingDiv').addClass('hidden');
            $('#productWindow').removeClass('hidden');
        }

        $.ajax('lib/php/clearDiscounts.php');

        var cat = $(this).attr('id');
        var category = {'cat': cat};
        var url = 'lib/php/productListing.php';
        var sent = $.post(url, category);
        sent.done(function (data) {
            $('#productWindow').html(data);
        });
        sent.fail(function (data) {
            alert('failure' + JSON.stringify(data) + 'data.responseText:  ' + data.responseText);
        });
        showCart();
    });

    /*view cart button*/
    $('#footer').on('click', '.cartHolder', function (event) {
        // event.stopImmediatePropagation();

        $('#productWindow').addClass('hidden');
        $('#cartDiv').removeClass('hidden');
    });

    /*close cart button*/
    $('body').on('click', '#closeCart', function (event) {
        event.stopImmediatePropagation();
        $('#productWindow').removeClass('hidden');

        $('#cartDiv').addClass('hidden');
        var clearDiscount = $.ajax('lib/php/clearDiscounts.php');
        clearDiscount.done(function (data) {
            console.log("cleared discounts: " + data);
            $('#cartDiv').html($('#cartDiv').html());
            showCart();
        });
        clearDiscount.fail(function (a) {
            console.log(a.responseText);
        });
    });

    /*add items to shopping cart*/
    //noinspection JSJQueryEfficiency
    $('#content').on('click', '.addToCart', function (event) {
        event.stopImmediatePropagation();

        var delay = 1000;
        var item = $(this).attr('name');
        /* TODO Make To Where Output Spaces */
        var data = {'itemNum': $(this).val()};
        var url = 'lib/php/addToCart.php';
        var sent = $.post(url, data, null, 'json');
        // $('#addingItem').html('<------Putting ' + item + ' in your cart.');
        sent.done(function (data) {
            $('.badge').html(Object.keys(data).length);
            showCart();

            console.log('data from adding to cart');
            // $('#addingItem').html(item + ' is in your cart.');
            // setTimeout(function () {
            //     $('#addingItem').html('');
            // }, delay);
        });
        sent.fail(function (data) {
            console.log('failure' + data);
        });
    });

    /*remove item from cart and refresh cart*/
    //noinspection JSJQueryEfficiency
    $('body').on('click', '.removeItem', function (event) {
        event.stopImmediatePropagation();

        if (confirm("Are You Sure Want To Take Item Out Of Your Cart?")) {
            var itemNum = {'itemNum': $(this).attr('name')};
            console.log($(this).attr('name') + ' has been clicked to remove');
            var sent = $.post('lib/php/removeFromCart.php', itemNum);
            sent.done(function (data) {
                console.log('data from item removed from cart' + data);
                var reset = $.ajax('lib/php/clearDiscounts.php');
                reset.done(function () {
                    console.log('cleared discounts')
                });
                showCart();
                getBadge();

            });
        }
    });

    /*figure discount amount*/
    $('body').on("submit", '#discount', function (event) {
        event.preventDefault();
        event.stopImmediatePropagation();
        var data2 = {
            'discountCode': $('#discountCode').val(),
            'originalAmount': $('#cartPrice').text().trim().substr(1)
        };
        $('#discountDetails').html("<p>Figuring Discount...</p>");
        console.log("data before going to discount:  " + data2.discountCode);
        var url = 'lib/php/discounts.php';
        var figureDiscount = $.post(url, data2, null, 'json');
        figureDiscount.done(function (data) {
            $('#discountDetails').html(data.html);
            $('#totalAmount').html($('#totalAmount').html());
            alert(data.discountStatus);
            console.log("objects in data" + data.count);
            console.log("data after submitting discount code:  " + data.message);
        });
        figureDiscount.fail(function (data) {
            console.log("fail:  " + data.error)
        });
    });

    // go to customer info screen
    $('body').on('click', '#pay', function (event) {
        event.preventDefault();
        event.stopImmediatePropagation();
        if (confirm("Are You Sure You Are Ready To Pay???")) {
            // loadCustomerInfo();
            $('#cartDiv').addClass('hidden');
            $('#shippingDiv').removeClass('hidden');
        }
    });

    // process order, customer info & send to paypal'
    $('body').on('submit', '#customerInfo', function(event) {
        event.preventDefault();
        event.stopImmediatePropagation();
        var formData = $('#customerInfo').serialize();
        var sent = $.post('lib/php/processCart.php', formData);
        sent.done(function(data) {
            console.log("form sent: " + data);
            var clearCart = $.ajax('lib/php/clearSession.php');
            clearCart.done (function() {
                console.log("cart emptied");
                getBadge();
                $('#shippingDiv').addClass('hidden');
                $('#productWindow').removeClass('hidden');
            });
            clearCart.fail (function(data) {
                console.log(data.responseText);
            });
        });
        sent.fail(function(data) {
            console.log("failed:  " + data.responseText);
        });
    });
});

最佳答案

我认为这是一个专门与 jQuery Mobile 有关的问题，因为已经提到了类似的行为 here和 here .

第二个特别提到了一个修复，如果您使用的是单个“多页”，看起来就像您正在做的那样。

希望这能帮助您找到更具体的答案。

关于javascript - 添加和删​​除类似乎会导致 dom 中出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38808468/

24 4 0
文章推荐： javascript - 第二次单击按钮时执行的 Angularjs ng-click 函数
文章推荐： c++ - 三角函数/ float 问题
文章推荐： html - 播放视频时在视频 jwplayer7 中间显示暂停按钮
文章推荐： C++调试返回0返回变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com