javascript - AJAX 不会在出现奇怪情况时切换表

Question

大家下午好!

所以我有一个基本的 Web 应用程序。共有三个下拉菜单，每个下拉菜单都会在选择前一个下拉菜单后出现。选择第三个下拉菜单后，我们将向用户显示 TransferGuide (display_guide.php)。

display_guide.php通过transfer.php上的AJAX请求输出

当用户单击表标题时，它会展开以显示类别下的类(class)...，如下所示:

一切都很好并且工作完美。唯一的问题是，当我转到下拉菜单更改为不同的下拉菜单组合时，我的表格不再切换。它会更改以显示正确的信息，但拒绝切换。奇怪的是，这只发生在奇怪的情况下。该表格仅在我第一次、第三次、第五次更改组合时才会切换，不会在第二次、第四次等情况下切换。

有谁知道这种奇怪行为的原因是什么？

这是我的代码，提前致谢!这只是<script>整个 HTML/PHP 代码的一部分，负责将 display_guide.php 显示到页面上。 :)

转账.php:

      <!--
      **************************
        AJAX FOR DROP DOWN MENUS
      **************************
      -->

      <script>
      // 1. Create an XMLHTTPRequest Object (XHR)
      // 2. onreadystatechange is a property of the XHR Object, where we can store
      //        our function to execute once we send our XHR object, this is an
      //        event handler.
      // 3. Check if readyState (values 0 thru 4) and status (values 200 or 404)
      //        in which case response is ready, in responseText, so we can assign to
      //        inner part of HTML element with ID of uni or major or transfer_guide
      // 4. Open request with specified properties, with ?cc= as GET
      // 5. Send the request using the open() property

      function loadUniDropDown(str) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("uni").innerHTML = xhttp.responseText;
          }
        };
        xhttp.open("GET", "uni.php?cc="+str, true);
        xhttp.send();
      }

      function loadMajorDropDown(str2) {
        var xhttp2 = new XMLHttpRequest();
        xhttp2.onreadystatechange = function() {
          if (xhttp2.readyState == 4 && xhttp2.status == 200) {
            document.getElementById("major").innerHTML = xhttp2.responseText;

          }
        };
        xhttp2.open("GET", "major.php?uni="+str2, true);
        xhttp2.send();
      }

      function loadTransferGuide(str3) {
          var xhttp3 = new XMLHttpRequest();
              xhttp3.onreadystatechange = function() {
                    if (xhttp3.readyState == 4 && xhttp3.status == 200) {
                      document.getElementById("transfer_guide").innerHTML = xhttp3.responseText;

                      // HIDES THE ALL THE GENED COURSES AND NOT THE GENED CATEGORIES BY DEFAULT ON PAGE LOAD
                      $(document).ready(function(){
                        //$("thead").next().hide();
                        $(".genEdCategoryHeaders").nextUntil(".genEdCategoryHeaders").hide(); //hides everything so only the categories show
                        $(".CourseName").hide();    //hides all the course names

                        }
                      );

                    //  ON HOVER OVER GENED COURSES DISPLAY COURSE NAME INSTEAD OF NUMBER
                      $(".hoverOnCourses").mouseover(
                        function(){
                          $(this).children(".CourseNumber").hide();
                          $(this).children(".CourseName").show();
                          $(this).children(".CourseName").css("background-color","gray");   //gives hover effect by changing the background color
                          $(this).children(".CourseName").children().css("color", "white");
                        }
                      );
                      $(".hoverOnCourses").mouseout(
                        function(){
                          $(this).children(".CourseName").hide();
                          $(this).children(".CourseNumber").show();
                        }
                      );


                      // $("body").on("mouseover", ".CourseNumber", function(){
                      //   $(this).hide();
                      //   $(this).next().show();
                      //   $(this).next().css("background-color","gray");
                      //   $(this).next().children().css("color", "white");
                      // }).on("mouseout", ".CourseName", function(){
                      //   $(this).hide();
                      //   $(this).prev().show();
                      // })
                      //--------------TOGGLE THE GENED COURSES----------------
                      $(document).on("click", "thead", function(){
                        //$(this).next(".genedcat").toggle();
                        $(this).nextUntil("thead").toggle();
                        }
                      );

                    }
            }
      xhttp3.open("GET", "display_guide.php?major="+str3, true);
      xhttp3.send();
}


      </script>

Answer 1

如果您发布了一些有关结构的基本 html，那会更容易，但仍然从您发布的内容中我可以找出一个原因

在您的 loadTransferGuide() 函数中，查看 document.getElementById("transfer_guide").innerHTML = xhttp3.responseText; 之后的所有内容

您正在为其中的鼠标悬停和单击事件分配所有事件处理程序，这可能看起来不错，因为您希望将事件分配给动态加载的内容，但我认为这就是导致您在传输指南 html 时看到的麻烦的原因被插入并分配事件，它将第一次工作，但如果它们再次被替换/删除，事件处理程序也会被破坏，因此它将交替工作，但并不总是解决这个问题，只需删除代码来修复在它们上使用事件委托(delegate)

  $("body").on("mouseover",".hoverOnCourses",
           function(){
            $(this).children(".CourseNumber").hide();
            $(this).children(".CourseName").show();
            $(this).children(".CourseName").css("background-color","gray");   //gives hover effect by changing the background color
            $(this).children(".CourseName").children().css("color", "white");
   });

  $("body").on("mouseout",".hoverOnCourses",
           function(){
             $(this).children(".CourseName").hide();
             $(this).children(".CourseNumber").show();
           }
  ); 

剪切下面的代码并将其粘贴到全局范围内该函数的外部

        //--------------TOGGLE THE GENED COURSES----------------
        $(document).on("click", "thead", function(){
            //$(this).next(".genedcat").toggle();
            $(this).nextUntil("thead").toggle();
            }
        );