jquery点击事件无效对于动态生成出来的内容，jquery点击事件无效的问题

最近前端在做一个功能，

功能的内容是点击A按钮，生成内容1，在内容1中点击B按钮，生成内容2，在内容2中点击C按钮，返回最初界面样式。

整个jquery的代码，全部使用了 .click(function(){} 层层嵌套的结构。在这种click()点击事件支撑下的动态内容生成，依然没有问题。
但是“ .click(function(){} 层层嵌套的结构”会出现一个问题，就是最后一步，返回最初界面后，再去点击A按钮，就不起作用了。

最后还是使用了jQuery on() 方法解决的。

使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。 就是说，如果元素是通过jquery动态创建的，而不是写在页面代码中的时候，最好还是使用on()来做事件处理，而不要一昧地单纯使用click()，即使可以正常运行，也容易在运行结束后发生程序隐患。

on() 和 click() 的区别:
二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中。
即使元素不是由jquery动态生成的，那么我们依然使用on()来处理元素，也是可以的，所以，应该多熟悉和熟练使用on（）来对元素进行事件处理。

几个有用的相关资料：
.click()与on(‘click’,function())
https://blog.csdn.net/zhouzy539/article/details/83117489

jquery点击事件失效原因和解决办法
https://www.cnblogs.com/leiting/p/9323539.html

jQuery on() 方法（笔记内容也有用）
https://www.runoob.com/jquery/event-on.html

Recommend