Question

我正在建立一个电子商务网站。现在，它基本上是一个基于页面加载和点击过滤的HTML页面。我之所以这样做是因为整个网站都需要充满活力，因为我很快会在节目中加入。

由于我已将脚本放在实际页面而不是主.js文件中，所以似乎一切正常。我到处都有一些小问题，我希望这个问题有助于解决其中一些问题。

有时当我点击查看购物车按钮时，它会抛出一个类型错误，说$ a.mobile.document.on不是一个函数。这并不是一直发生的。我只需点击打开购物车的按钮，购物车就会刷新。当我点击按钮时，代码中的任何内容都不应该改变，一切都应该完全相同。为什么我有时会收到错误？没有关于错误发生频率的模式（即每第3次点击等）

我的代码：

 <head>
        <meta charset="UTF-8"/>
        <title>DATique</title>
        <link rel="stylesheet" href="styles.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="lib/jqm-icon-pack-fa.css">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>

    <div id="container" data-role="page" data-theme="b">

        <div id="header" data-role="header">

            <div id="headerGraphic"><img class="menu" src="img/products/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">

            <!-- todo add facebook plugin -->
            <div id="sideBar">
                <div id="sideNav">
                    <script>

                    </script>
                </div>
            </div>
            <div id="productWindow">
                <script>

                </script>
            </div>

        </div>
        <div data-role="footer" id="footer">
            <ul>
                <li id="addingItem"></li>
                <li id="cartHolder">
                    <div class="view">View Cart</div>
                    <div class="cartImg"><img src="lib/png/shopping-cart.png"></div>
                    <div class="badge ui-corner-all"></div>
                </li>
            </ul>
        </div>

    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {

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

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

            $('#cartHolder').unbind().click(function (data) {
                var url = 'lib/cart.php';
                var getCart = $.post(url);
                console.log(data);
                getCart.done(function (data) {
                    $('#content').html(data);
                });
                getCart.fail(function (data) {
                    console.log(data);
                });
            });

        })
    </script>
    </body>

这是我的cart.php。受点击事件影响的唯一文件是show cart按钮。

<link rel="stylesheet" 

    href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 



<?php
session_start();  
#$_SESSION = array();  

$items = $_SESSION;  


echo "<div id='showCart' class='ui-corner-all' style='max-width:400px;'>  
    <div data-role='header' data-theme='a' class='ui-corner-all' style='margin-top:20px;'>  
    <h1>Your Cart</h1>  
    </div>  
    <div role='main' class='ui-content ui-corner-all'>  

        <ul data-role='listview' data-split-icon='delete' data-split-theme='d'>";  
foreach ($items['cart'] as $list) {  
    echo "<li ><a href='#'>  
                <img src = 'img/products/" . $list['itemNum'] . ".png'>  
                <h3 > " . $list['itemName'] . " </h3 >  
                <h1 style='text-align:right'> " . $list['price'] . "   
</h1 ></a>
                <a href='#' class='removeItem' name='" . $list['itemNum'] . "'>Remove Item</a>                                 
            </li >";  
}  

echo "</ul>          
      </div>  
      </div>"  
?>  
<script>  
$(document).ready(function() {  
    console.log ("error ready");  
    function showCart() {  
        console.log("showCart Function");  

        var url = 'lib/cart.php';  
        var getCart = $.post(url);  
        getCart.done(function (data) {  
            console.log("cart received");  
            $('#content').html(data);  
        });  
    }  

    $('.removeItem').unbind().click(function () {   
        console.log("remove clicked");  
        var itemNum = {'itemNum': ($(this).attr('name'))};  
        var sent = $.post("lib/removeFromCart.php", itemNum);  

        sent.done(function () {  
            console.log("item removed from cart");  
                showCart();  
        });  
    });  
});  
</script>

我还有另外两个页面上有脚本，这些页面通过$ .post加载到主页上。

很抱歉，如果这个问题很简单，我希望它不是一个时期或者在某个地方。它几乎总是一个时期或支撑。再次，看看是否有人可以告诉我为什么这有时会在我按下查看购物车按钮时抛出错误。它似乎是在cart.php中调用console.log之后立即执行的。

Answer 1

只是注释而不是答案

我把所有的javascript放在myScript.js文件中，该文件加载在主页面的html底部。但是由于某种原因，所有其他带有scipts的页面都不会读取主页面上的javascript，直到我将.js文件加载到每个页面中。

$(document).ready(function() { 
  code 1
....});

 $(document).ready(function() { 
  code 2
....});

代码1无法访问代码2，反之亦然，在php中这类似于

function one(){
     code 1
} 

function too(){
    code 2
}

另一种方法是使用window.来全球化内容，尽管通常不推荐使用var one; var window.one;。

$(element).data('mydata', {foo:'bar'});

例如

（范围解析）。其他方式涉及使用DOM，通过附加到页面上的对象，例如插件的工作方式。例如，使用Weekly Calendar

不确定这是否就是你所说的，但解释是渴望发表评论的方式。

偶尔会出现类型错误，但不是每次都有

1 个答案: