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

最新推荐文章于 2023-02-09 23:25:48 发布

AC单元

最新推荐文章于 2023-02-09 23:25:48 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： javascript jquery css

本文链接：https://blog.csdn.net/yanghq0915/article/details/128603743

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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尾部
    }