共计 982 个字符，预计需要花费 3 分钟才能阅读完成。
A01-jquery 操作之：如何获取动态生成元素（获取未来元素）
what
-
动态生成元素？
- html 代码中没有的元素
- 通过 js 生成的元素
- 通过模板字符串生成的元素
- 反正就是页面加载后才生成的元素
why
- 传统的方 直接使用 $(选择器)无法获取到该元素
- 为新增元素绑定事件
- 获取新增元素列表进行遍历操作
how
-
绑定事件的几种方式
- 自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品
-
on 方法为子元素绑定事件
$('选择器').on('事件名称','子元素选择器',callback)-
example：
<body> <div id="father"></div> </body> <script src="jquery.js"></script> <script> // 动态生成子元素 var children = $('<div id="children"></div>') // 将子元素加入父元素 $('#father').append(children); // 为子元素注册事件 $('#father').on('click','#children',function(){ // 输出子元素中的内容 console.log($(this).val()); }); </script> -
通过上面的例子可以看到要使用 on（）方法获取子元素，必须要绑定一个方法
有的教程说使用 delegate() 方法 获取元素，事件不是必须的但是官方文档上写了，事件也是必须存在的所以我不考虑这种方式。
-
如何获取元素列表进行遍历
- 很简单
- 直接在 on（）方法的回调函数中获取
-
example：
<body> <div class="father"></div> </body> <script src="jquery.js"></script> <script> for(var i = 0 ;i < 10; i++){ // 动态生成子元素 var children = $('<div class="children"> 你好啊 </div>') // 将子元素加入父元素 children.appendTo($('.father')); } // 为子元素注册事件 $('.father').on('click','.children',function(){ // 输出所有子元素 console.log($('.father .children')); }); </script>
正文完
发表至： javascript
2019-08-11
