Using javascript to dynamically load the header, the click event and the hover event appear invalid solution

Here is to use the promise function of es6 to load asynchronously. When the HTML is dynamically loaded, the past HTML fragment is loaded and then the js code of the binding event is executed;

The specific process is as follows

Here is an example using the jQuery framework

 1 $(function(){
 2     //css
 3 var preload=new Promise(function (open) {
 4     var link=document.createElement("link");
 5     link.rel="stylesheet";
 6     link.href="css/top.css";
 7     document.head.appendChild(link);
 8     //html
 9     $.ajax({
10         type:"get",
11         url:"totop.html",
12         success:function(html){document.getElementById("header").innerHTML= html;
 13              open();
 14  // open here means that the content after the following then is executed when the above code is executed, which is equivalent to switch 
15          }
 16      });
 17  
18      });
 19      preload.then( function (){
 20       // The js code that needs to be executed after the HTML loading dom is rendered is written here, that is, various events bound to the element 21   })
 22 })