1.动态添加
的元素无法绑定事件
平时写前端
页面,经常用到模板引擎
,或者是后期通过json
动态生成的元素需要绑定各种事件
,但是怎么调用
都调用不到,是因为,页面加载
的时候,你的js已经执行
完了,但是元素还没有加载出来,或者在加载中,异步执行无效
.
解决方法:
$('父容器').on('click','要使用的元素',()=>{
})
2.网页使用的第三方CSS
和JS渲染引擎
加载无效
平时我比较喜欢用网上的一些第三方包
,来实时解析我的md代码块主题
,但是若是我动态添加
的元素,则无法应用到css样式,是因为,在网页加载的时候,你定义的第三方包和css已经对你静态的元素生效了,但是你新加进来的元素,因为没有运行过第三方包,浏览器并不认识你的元素,所以导致CSS没有挂到页面上.
解决办法:在网页动态元素加载完毕之后再进行添加第三方CSS和JS包
function addlink(){
//<link href="./CSS/md.css" rel="stylesheet" />
var url = "./CSS/public.css/Prism.css";
var link=document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", url);
document.getElementsByTagName("head")[0].appendChild(link);
}
function addscript(){
var script = $('<script src="./JS/prism.js" ></script>'); //创建script标签
$('body').append(script); //将标签插入body尾部
}
3.使用JQuery.js
明明在头部添加了却不生效
添加了不生效,是因为在加载的时候没有把 link:JQuery.js
放在第一个JS加载标签上,只有放在了第一个加载位置了,才会生效.
<script src="./JS/jquery.js"></script>