jQuery代码在浏览器上不起作用答案

【问题标题】：jQuery code not working on BrowserjQuery代码在浏览器上不起作用
【发布时间】：2016-09-02 18:23:32
【问题描述】：

我面临一个问题：我的 HTML 视图中有一些 JQuery 代码在我的 Google Chrome 浏览器上运行良好，但在另一台机器（服务器）Google Chrome 上，如果在 iiS 上发布相同的代码，jQuery 将停止工作。

在浏览器中启用了 jS，但为什么没有选择这个 jQuery 代码？请指教。

在路径中添加了所有 JS/jQuery 文件时源 HTML 中的错误：

@{
ViewBag.Title = "Show";
 }
 <!DOCTYPE html>
 <html lang="en">
 <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

@*<meta http-equiv="Refresh" content="5">*@

<title>Wallboard B</title>
<link type="text/css" rel="stylesheet" href="~/cssNew/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="~/cssNew/style.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->


</head>

<span id="View1">

<section class="gage-wrap">
    <div class="container-fluid stretch">
        <div class="row no-gutter">

            <div class="col-lg-3">
                <div class="row no-gutter">

                    <!----- Avg Handle Meter ------>

                    <div class="col-lg-12 gage">
                        <h1>Avg Handle Time (Sec)</h1>
                        <canvas id="avg_handle_meter" width="285" height="170">
                            Canvas not available.
                        </canvas>
                        <span id="avg_handle_value">@ViewBag.averageHandleTime</span> <!---Print Speed -->

                    </div>

                    <!----- Avg Handle Meter End ------>
                    <!----- Avg Speed Meter ------>
                    <div class="col-lg-12 gage">
                        <h1>Avg Speed of Answer (Sec)</h1>
                        <canvas id="avg_speed_meter" width="285" height="170">
                            Canvas not available.
                        </canvas>
                        <span id="avg_speed_value">@ViewBag.averageSpeedOfAnswer</span> <!---Print Speed -->
                    </div>

                    <!----- Avg Speed Meter End ------>

                </div>
            </div><!--/col-md-3-->

            <div class="col-lg-6">
                <div class="row no-gutter">

                    <!----- Service Level Meter ------>

                    <div class="col-lg-12 gage">
                        <h1>Service Level %</h1>
                        <canvas id="service_level_meter" width="580" height="333">
                            Canvas not available.

                        </canvas>

                        <span id="service_level_value">@ViewBag.serviceLevel</span><!---Print Speed -->
                    </div>


                    <!----- Service Level Meter End ------>


                    <div class="col-lg-12 gage time">
                        <h1>Longest Call in Queue</h1>

                        <span>@ViewBag.longestCallInQueue</span>
                    </div>
                </div>
            </div><!--/col-md-6-->
            <div class="col-lg-3">
                <div class="row no-gutter">

                    <!----- Total Calls Meter ------>

                    <div class="col-lg-12 gage">
                        <h1>Total Calls in Queue</h1>
                        <canvas id="total_calls_meter" width="285" height="170">
                            Canvas not available.
                        </canvas>
                        <span id="total_calls_value">@ViewBag.callsInQueue</span><!---Print Speed -->
                    </div>

                    <!----- Total Calls Meter End ------>
                    <!----- Abandoned Rate Meter ------>

                    <div class="col-lg-12 gage">
                        <h1>Abandoned Rate %</h1>
                        <canvas id="abandoned_rate_meter" width="285" height="170">
                            Canvas not available.
                        </canvas>
                        <span id="abandoned_rate_value">@ViewBag.abandRate</span><!---Print Speed -->
                    </div>

                    <!----- Abandoned Rate Meter End ------>


                </div>
            </div><!--/col-md-3-->

        </div><!--/row-->
    </div><!--/container-fluid-->
</section><!--/gage-wrap--><!--/gage-wrap-->

        <footer style="margin-top:8%">
            <p>Powered by Expertflow BI Services</p>
        </footer>



        @*<script type="text/javascript" src=""></script>*@



</span>            


<span id="View2">
    <div id="div2">
        <header>
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>High ARPU - H+HVC</h1>
                    </div>
                </div>
            </div>
        </header>

        <section class="the-table">
            <div class="container-fluid">
                <div class="row no-gutter row-eq-height">
                    <div class="col-md-2 col-sm-6">
                        <em><span>Logged In Agents</span></em>
                        <span><span>@ViewBag.loggedInAgents</span></span>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <em><span>On Calls</span></em>
                        <span><span>@ViewBag.onCalls</span></span>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <em><span>Agents In Ready</span></em>
                        <span><span>@ViewBag.agentsInReadyState</span></span>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <em><span>Agents In Not Ready</span></em>
                        <span><span>@ViewBag.agentsInNotReadyState</span></span>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <em><span>Agents In Wrapup</span></em>
                        <span><span>@ViewBag.agentsInWrapup</span></span>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <em><span>Reserved Agents</span></em>
                        <span><span>@ViewBag.reservedAgents</span></span>
                    </div>
                </div><!--/row-->
                <div class="row no-gutter">
                    <div class="col-md-2 col-sm-6">
                        <em><span>Calls Offered</span></em>
                        <span><span>@ViewBag.callsOffered</span></span>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <em><span>Calls Answered</span></em>
                        <span><span>@ViewBag.callsAnswered</span></span>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <em><span>Calls Abandoned</span></em>
                        <span><span>@ViewBag.callsAbandoned</span></span>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <em><span>Calls In Queue</span></em>
                        <span><span>@ViewBag.callsInQueue</span></span>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <em><span>Longest Talk Duration</span></em>
                        <span><span>@ViewBag.longestTalkDuration</span></span>
                    </div>
                    <div class="clearfix visible-xs"></div>
                    <div class="col-md-2 col-sm-6">
                        <em><span>Abandoned %</span></em>
                        <span><span>@ViewBag.AbandRate</span></span>
                    </div>
                </div><!--/row-->
            </div><!--/container-fluid-->
        </section><!--/the-table-->

        <section class="the-table wide">
            <div class="container-fluid">
                <div class="row no-gutter">
                    <div class="col-md-12">
                        <em class="large">Service Level %</em>
                        <span class="large">@ViewBag.serviceLevel</span>
                        <div class="clearfix visible-xs"></div>
                        <em>AHT (Sec)</em>
                        <span>@ViewBag.averageHandleTime</span>
                        <em>ASA (Sec)</em>
                        <span>@ViewBag.averageSpeedOfAnswer</span>
                        <em>Max Time In Queue</em>
                        <span>@ViewBag.longestCallInQueue</span>
                    </div>
                </div><!--/row-->
            </div><!--/container-fluid-->
        </section><!--/the-table-->

        <footer>
            <p>Powered by Expertflow BI Services</p>
        </footer>





    </div>
</span>

   <script type="text/javascript" src="~/jsNew/bootstrap.min.js"></script>
   <script type="text/javascript" src="~/jsNew/service-level-meter.js">   </script>
   <script type="text/javascript" src="~/jsNew/avg-handle-meter.js"></script>
   <script type="text/javascript" src="~/jsNew/total-calls-meter.js"></script>
   <script type="text/javascript" src="~/jsNew/avg-speed-meter.js"></script>
   <script type="text/javascript" src="~/jsNew/abandoned-rate-meter.js"></script>
   <script type="text/javascript" src="~/js/bootstrap.min.js"></script>


  <script type="text/javascript" src="~/js/jquery-latest.min"></script>
  <script src="~/js/jquery.min.js"></script>
  <script src="~/js/jquery-1.6.2.min.js"></script>
  <script src="~/js/jquery-ui-1.8.16.custom.min"></script>



<script>
$(document).ready(function () {  

function ToggleFunction() {
    $('#View2').hide();

    alert("HELLO from VIEW1")
    myVar = setTimeout(SecondView, 11000);


}

function SecondView() {
    $('#View1').hide();
    alert("HELLO from VIEW2")
    $('#View2').show();
}

});
</script

【问题讨论】：

控制台说什么了吗？
您需要将其归结为minimal reproducible example。远程调试不是 Stack Overflow 的目的。
您应该在其他 javascript 包含之前包含 jquery，因为它们通常需要 jquery，例如 bootstrap
于是开始调试。您的控制台屏幕截图准确地显示了错误是什么。
您在 DOM 中的 bootstap.js 高于 jQuery.js 如果在引导程序初始化之前未加载 jQuery，则引导程序会抛出该错误。

标签： javascript php jquery html google-chrome

【解决方案1】：

您的 jquery.min.js 将其置于所有其他 js 文件之上。 jQuery 库必须在其他 jquery 插件之前加载

<script type="text/javascript" src="~/js/jquery-latest.min"></script> <script src="~/js/jquery.min.js"></script> <script src="~/js/jquery-1.6.2.min.js"></script> <script src="~/js/jquery-ui-1.8.16.custom.min"></script>

现在加载其他 js

<script type="text/javascript" src="~/jsNew/bootstrap.min.js"></script> <script type="text/javascript" src="~/jsNew/service-level-meter.js"> </script> <script type="text/javascript" src="~/jsNew/avg-handle-meter.js"></script> <script type="text/javascript" src="~/jsNew/total-calls-meter.js"></script> <script type="text/javascript" src="~/jsNew/avg-speed-meter.js"></script> <script type="text/javascript" src="~/jsNew/abandoned-rate-meter.js"></script> <script type="text/javascript" src="~/js/bootstrap.min.js"></script>

【讨论】：