一些小总结,记录下来
1. 动态事件绑定
解释:当我们的元素来自 ajax 或者是其他方式动态加载的话,这些元素的时间不用直接用( click , blur … )等方法捕获
例子
假设我们在 js 中通过ajax动态 给 ul.types 添加 子元素li标签
<ul class="category types">
<li class="category-name tag">
<button class="layui-btn layui-btn-normal">全部形式</button>
</li>
<!--<li class="active"><span class="tag">剧情</span> </li>-->
</ul>
如果我们在 js 中添加事件处理
$("ul.types li").click(function(){
alert("demo");
});
如果手动去点击动态生成的 li 标签发现事件没有触发,但是
- 全部形式
会触发,因为它是静态的
解决方法
通过 on() 方法:要相对于静态元素下的子元素才有效
$("ul.types").on("click", "li",function () {
alert("demo");
});
// 此时表示监听 ul.types 元素下的li 标签,条件是:ul.types 是静态的
// 相对于静态元素下的动态方法