js动态绑定动态元素发布于2019-11-16 23:29:01，更新于2024-06-11 10:11:36，标签：js 文章会持续修订，转载请注明来源地址：https://meethigher.top/blog

No.1 动态生成元素绑定事件

今天碰到一个问题，js无法对动态生成的元素进行绑定。

我一开始，知道没有获取到那个标签，所以通过onload方法来获取元素，企图通过初始页面加载完成之后，再获取标签，这样也行，但是，异步获取数据之后生成的标签就不行了，onload只能执行一次啊，因为异步请求没有刷新页面啊。

后来，搜了一下，发现了解决方案；

<ul class="fu">
    //动态生成的li标签
    <li>1</li>
    <li>2</li>
</ul>

//这个是我的写法
$("li").on("click",function (){
    alert("haha");
});
//这就出现问题了，这样绑定事件，一旦元素发生变化，就会失效

//解决方案
$(".fu").on("click",function (){
    alert("haha");
});
//通过上面的这个方法，就能动态地给动态元素添加事件了

No.2 点击非内容区域关闭弹窗

今天晚上还有个值得一提的事情，就是标题这个事。

这个就涉及到冒泡的问题了。

$(document).on("click",function (){
    /*隐藏元素的逻辑*/
});
$("div").on("click",function (){
    /*显示元素的逻辑*/
});
//上面的这种写法，会导致两个都会冒泡，也就是执行的意思。出现的效果就是元素刚显示就被隐藏了

//解决方案
$("div").on("click",function (e){
    e.stopPropagation();//阻止click事件冒泡到父元素
    /*显示元素的逻辑*/
});

按上面的方法，就完美解决了。

总结一下，其实这都不难理解，但是总是会在一些小问题上浪费时间。

算了，仔细想想，这一切都是我成为大佬路上的垫脚石。