利用javascript动态加载头部出现点击事件与hover事件无效解决方法

这里是利用es6的promise函数来异步加载,当HTML动态加载过去的HTML片段加载完毕再执行绑定事件的js代码;

具体过程如下

这里是用了jQuery框架的例子

 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写在这里的意思是当上面的代码执行完毕才执行下面then后面的内容,相当与开关
15         }
16     });
17 
18     });
19     preload.then(function(){
20       // 需要等HTML加载dom渲染完毕才能执行的js代码写在这里,即给元素绑定的各种事件     
21   })
22 })

猜你喜欢

转载自www.cnblogs.com/shuen/p/8987208.html