AJAX不会在奇怪的事件上切换表格

Question

Good afternoon everyone!

So I have a basic Web Application. There are three dropdown menus and each dropdown menu appears after the previous dropdown has been selected. Once the third dropdown is chosen, we display to the user the TransferGuide (display_guide.php).

display_guide.php is outputted via an AJAX request on transfer.php

When a user click on the table header it expands to display courses under the category... that looks like this:

Everything is fine and works perfect. Only problem is, when I go to my dropdown menus to change to a different combination of dropdown menus, my table no longer toggles. It changes to display the right information, but it refuses to toggle. And the weird thing is that this ONLY happens on odd instances. The table will toggle ONLY the 1st, 3rd, 5th time I change the combinations and not the 2nd, 4th and so forth.

Does anyone have any idea what could be the reason for this odd behavior?

Here is my code and thanks in advance! This is only the <script> portion of the entire HTML/PHP code that is responsible of displaying the display_guide.php on to the page. :)

transfer.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

If you have posted some basic html regarding the structure it would have been easier but still from what you have posted i could figure out one reason

In your loadTransferGuide() function see all the stuff after document.getElementById("transfer_guide").innerHTML = xhttp3.responseText;

you are assigning all the event handlers for mouseover and click events inside it which may look okay since you would want to assign events to the content loaded dynamically but i think this is what is causing the trouble you see when the transfer guide html gets inserted and you assign events it will work the first time but if they get replaced/removed again the event handler too get destroyed so it will work alternate times but not always to fix that just remove the code to fix that use event delegation on them

  $("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();
           }
  ); 

and cut below code and paste it outside of that function in global scope

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