摘要

我太难了，完成功能半小时，修bug做兼容俩小时

正文

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

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

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

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

html 
1
2
3
4
5

<ul class="fu">
    //动态生成的li标签
    <li>1</li>
    <li>2</li>
</ul>
javascript 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

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

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

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

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

javascript 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

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

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

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

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

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