# 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>