前端 / js 的一些总结

程序猿卡卡罗特_

于 2019-03-14 09:13:11 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：动态元素绑定

本文链接：https://blog.youkuaiyun.com/hi_bigguy/article/details/88545554

前端专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了动态事件绑定的概念及其实现方法，特别是在使用ajax或其他方式动态加载元素时，如何利用jQuery的on()方法正确地为这些动态生成的元素绑定事件处理器，避免常见的事件未触发问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一些小总结，记录下来

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 是静态的
// 相对于静态元素下的动态方法