jQuery Ereignisse in $ (Fenster) .load() Block funktioniert nicht nach dem Hosting auf Firebase

Question

1. Ich habe statische Website zu Firebase-Hosting bereitgestellt. Es gibt die Seite - https://sapcert-d5654.firebaseapp.com/sap-erp.html

2. Es gibt Skript filterContent.js, zu dieser Seite verbunden. In diesem Skript gibt es zwei Codeblöcke: $(document).ready(function() {...} und $(window).load(function() {...}. Eingabe von Ereignissen (.keyup()) von .ready() Block funktioniert gut, aber klicken Sie Ereignisse (.click()) von .load() Block überhaupt nicht funktionieren. Der Inhalt des .load() Block:

$(window).load(function() { 
    console.log("window loaded"); 

    var navLinkSelector = "a.mdl-navigation__link"; 
    var subsolutionBlockSelector = ".subsolution-block"; 

    //Filtering by link click 
    $(navLinkSelector).click(function(eventObject) { 
     var currentLink = eventObject.target; 
     var parent = $(currentLink).parent(); 
     var links = parent.children(); 
     var curLinkIdx = links.toArray().indexOf(currentLink); 

     $.each(links, function (index, elem) { 
      if (index != curLinkIdx) { 
       $(elem).css("font-weight","normal"); 
      } 
     }); 

     if ($(currentLink).attr("id") != "clearFilter") { 
      if ($(currentLink).css("font-weight") != "bold") { 
       $(currentLink).css("font-weight","bold"); 
      } 

      $(subsolutionBlockSelector).each(function() { 
       if ($(currentLink).text().search($(this).attr("title")) < 0) { 
        $(this).hide(); 
       } else { 
        $(this).show(); 
       } 
      }); 
      if ($("#clearFilter").css("display") == "none") { 
       $("#clearFilter").show(); 
      } 
     } else { 
      $(subsolutionBlockSelector).show(); 
     } 
     if ($(".mdl-layout__drawer").hasClass("is-visible")) { 
      $(".mdl-layout").get(0).MaterialLayout.toggleDrawer(); 
     } 
    }); 

    $("#clearFilter").click(function (eventObject) { 
     eventObject.preventDefault(); 
     if ($(this).css("display") != "none") { 
      $(this).hide(); 
     } 
    }); 
}); 

3. Aber wenn ich laufe Website lokal mit gulp serve:dist alle gut funktionieren.

4. Wenn ich diese Website über Google Drive hosten, ist das Problem das gleiche.

Answer 1

es zeigt Cross-Origin-Anforderung blockiert: Sie benötigen https://developers.google.com/api-client-library/javascript/features/cors

Answer 2

Vielen Dank an @progysm überprüfen !!!

1. Ich habe diesen Artikel lesen - https://learn.jquery.com/events/event-delegation/
2. Change-Ereignis von Kindern $(navLinkSelector).click(function(eventObject) {...} es verbindet Mutter $("#subsolutions-list").on("click", navLinkSelector, function(eventObject) {...}
3. Und es funktioniert jetzt !!!