jquery - 单击一定次数后，我的 jquery ui Accordion 停止加载 ajax 页面

Question

我面临的问题是，在我的控制台上进行某些点击后，我首先看到这条消息“主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验有不利影响”，此后每当我点击 mainMenu 元素时，与此相关的我的默认 ajax 页面未打开，我还在控制台中看到此错误“未捕获错误:无法在初始化之前调用 Accordion 上的方法；试图调用方法‘选项’”。我有点迷失在这个问题中，还没有弄清楚发生了什么。

这是我的 jquery 部分:-

 $(".accordion").accordion({collapsible:true, active:0, heightStyle: "content"});


    $("#protocolParameters").load("generalSystemStatus.html");


    $(document).on("click",".outerMenuItem",function(){

        var currentlyActive=$( ".accordion" ).accordion( "option", "active" );
        console.log("Current tab no. "+currentlyActive);

        if(currentlyActive===0){

            $("#protocolParameters").load("generalSystemStatus.html");


        }
        else if(currentlyActive===1){


            $("#protocolParameters").load("networkEthernet.html");


        }

        else if(currentlyActive===2){


            $("#protocolParameters").load("ntpDaemonStatus.html");

        }

        else if(currentlyActive===3){


            $("#protocolParameters").load("ptpMaster.html");

        }

        else if(currentlyActive===4){


            $("#protocolParameters").load("timingHardwareClockConfig.html");

        }

        else if(currentlyActive===5){              

            $("#protocolParameters").load("system.html");

        }

        else if(currentlyActive===6){


            $("#protocolParameters").load("adminAlarm.html");


        }

        else {

            $("#protocolParameters").load("/404.html .someError");

        }

    });

    $(".outerMenuItem").click(function(){
        if($(this).text()==="SYSTEM"){
           console.log("System Clicked");
            $("#protocolParameters").load("system.html");
        }
    });

    $(".innerMenuItem").click(function () {
        $(".innerMenuItem").removeClass("innerMenuItemOnClick");
        $(this).addClass("innerMenuItemOnClick");
        if ($(this).text() === "General") {

            $("#protocolParameters").load("generalSystemStatus.html");

        }
        else if ($(this).text() === "Networks") {

            $("#protocolParameters").load("networkStatus.html");

        }
        else if ($(this).text() === "Timing") {

            $("#protocolParameters").load("timingStatus.html");

        }
        else if ($(this).text() === "GNSS") {

            $("#protocolParameters").load("gpsStatus.html");

        }
        else if ($(this).text() === "PTP") {

            $("#protocolParameters").load("ptpStatus.html");

        }
        else if ($(this).text() === "Alarms") {

            $("#protocolParameters").load("alarmStatus.html");

        }
        else if ($(this).text() === "Ethernet") {


            $("#protocolParameters").load("networkEthernet.html");

        }
        else if ($(this).text() === "SNMP") {


            $("#protocolParameters").load("networkSnmp.html");

        }

        else if($(this).text()=== "NTP Daemon Status"){


            $("#protocolParameters").load("ntpDaemonStatus.html");

        }

        else if($(this).text()=== "PTP Master"){

            $("#protocolParameters").load("ptpMaster.html");

        }

        else if($(this).text()=== "PTP Slaves"){


            $("#protocolParameters").load("ptpSlave.html");

        }

        else if($(this).text() === "Hardware Clock Configuration"){


            $("#protocolParameters").load("timingHardwareClockConfig.html");

        }

        else if($(this).text() === "Holdover"){


            $("#protocolParameters").load("timingHoldover.html");

        }

        else if($(this).text() === "System"){


            $("#protocolParameters").load("system.html");

        }

        else if($(this).text()=== "Alarm"){


            $("#protocolParameters").load("adminAlarm.html");

        }

        else if($(this).text()=== "Logging"){


            $("#protocolParameters").load("adminLogging.html");

        }

        else if($(this).text()=== "Web Interface"){

            $("#protocolParameters").load("adminWebInterface.html");

        }

        else if($(this).text()=== "User Management"){


            $("#protocolParameters").load("adminUserManagement.html");

        }

        else{

            $("#protocolParameters").load("/404.html .someError");

        }

    });

这是我的 html 部分:

 <div class="accordion">
    <h3 class="outerMenuItem"><div class="systemStatusNormal"></div>STATUS</h3>
    <ul class="submenu">
        <li><a class="innerMenuItem innerMenuItemOnClick" href="#!">General</a></li>
        <li><a class="innerMenuItem" href="#!">Networks</a></li>
        <li><a class="innerMenuItem" href="#!">Timing</a></li>
        <li><a class="innerMenuItem" href="#!">GNSS</a></li>
        <li><a class="innerMenuItem" href="#!">PTP</a></li>
        <li><a class="innerMenuItem" href="#!">Alarms</a></li>
    </ul>
    <h3 class="outerMenuItem"><div class="systemStatusNormal"></div>NETWORK</h3>
    <ul class="submenu" id="networkSubmenu">
        <li><a class="innerMenuItem innerMenuItemOnClick" href="#!">Ethernet</a></li>
        <li><a class="innerMenuItem" href="#!">SNMP</a></li>
    </ul>

    <h3 class="outerMenuItem" ><div class="systemStatusRisk"></div>NTP</h3>
    <ul>
        <li><a class="innerMenuItem innerMenuItemOnClick" href="#!">NTP Daemon Status</a> </li>
    </ul>

    <h3 class="outerMenuItem"><div class="systemStatusWarning"></div>PTP Management</h3>
    <ul>
        <li><a class="innerMenuItem innerMenuItemOnClick" href="#!">PTP Master</a> </li>
        <li><a class="innerMenuItem" href="#!">PTP Slaves</a> </li>
    </ul>

    <h3 class="outerMenuItem"><div class="systemStatusNormal"></div>TIMING</h3>
    <ul>
        <li><a class="innerMenuItem innerMenuItemOnClick" href="#!">Hardware Clock Configuration</a> </li>
        <li><a class="innerMenuItem" href="#!">Holdover</a> </li>
    </ul>


    <h3 class="outerMenuItem innerMenuItem"><div class="systemStatusNormal"></div>SYSTEM</h3>
    <ul>
        <li><a class="innerMenuItem innerMenuItemOnClick" href="#!">System</a></li>
    </ul>

    <h3 class="outerMenuItem"><div class="systemStatusNormal"></div>ADMIN</h3>
    <ul>
        <li><a class="innerMenuItem innerMenuItemOnClick" href="#!">Alarm</a></li>
        <li><a class="innerMenuItem" href="#!">Logging</a></li>
        <li><a class="innerMenuItem" href="#!">Web Interface</a></li>
        <li><a class="innerMenuItem" href="#!">User Management</a></li>
    </ul>

</div>

这是 css :-

#sidebarElementDivPicture{
height:152px;
}

a{
   color: #3f3f4e;
   font-weight: bold;
   padding-left:15px;
 }

a.innerMenuItem{
     color: #363545;
}

a.innerMenuItemOnClick{
    color:#eb5e13 !important;
}

.accordion .ui-icon{
     display:none;
 }

 .accordion .ui-accordion-header{
    height:30px;
    position: relative;
    z-index: 3;
    width:200px;
  }

  .accordion .ui-accordion-header:hover{
     color:#eb5e13;
   }

   .accordion .ui-accordion-header .ui-state-active{
      color:#eb5e13;
    }

    .accordion .ui-accordion-content {
       position: relative;
       z-index: 6;
       width:180px;
       color:#eb5e13;
     }

    .accordion .ui-accordion-header:active{
        color:#eb5e13;
      }

      #sidebar{
          float:left;
          padding-left:200px !important;
          padding-top: 22px;
       }

Answer 1

终于解决了。问题不在于 Accordion 代码。问题是我为 jquery 和 jquery ui 引用调用脚本标签的方式，即

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui/jquery-ui.min.js"></script>

在我通过 AJAX 调用的几个文件中，其中一些具有这些脚本，因此在应用程序上下文中有一个开关。我从那些文件中删除了这些标签，并确保只有我的主页有 Accordion 有这些标签。现在可以完美运行了