最近前端在做一个功能,

功能的内容是点击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

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