JQuery 添加动态元素JS或CSS无效

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>