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 })