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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。