创新实训——html中的内部js方法调用失效问题

js中的事件绑定主要有三种方式:

① 行内绑定

② 动态绑定

③ 事件监听


今天在写系统注册页面时,出现了这样一个奇葩的问题:

我用第一种行内绑定的方式来实现一个选择框(选择不同的option会产生不同的操作来修改html界面),本来是非常顺利的,但在我修改了一些class和css样式之后,这种行内绑定的方式竟然莫名其妙的失效了:

html:


script:



如上图这种行内绑定的方式突然失效,但之后我将sChange()方法由html内部移到外部css文件中后,sChange()方法竟然再次生效:


.css:




然后,我又尝试了另一种事件绑定方式:动态绑定,结果内部调用和外部调用均可以实现


.css:



理想效果:




虽然经过js的修改可以解决问题,实现上图的效果,但我想弄明白其中的原因,所以总昨天晚上百度了一晚,看过了无数案例和解决方案,但仍然没有遇到过跟我一样的案例,今天又调试了一上午代码还是没有找到原因,所以希望有类似经历的小伙伴和知道原因的dalao能够伸出援手(救急),而我还会继续寻找原因,找到后会第一时间更新。

猜你喜欢

转载自blog.csdn.net/qq_38530808/article/details/80001174