昨天编写页面的时候遇到一个奇怪的错误,把input改为textarea之后,出现js文件不加载、点击之前正常的按钮也没有反应,排查了好久才发现。
修改之前:
<input id="name" type="text"/>
修改之后:
<textarea id="name" />
在谷歌浏览器的"F12-Network"中没有看到js文件加载记录,调试了好久都没有发现问题所在,因为只改了这一行,尝试改回之后就正常了,确认就是这一行的问题。
把textarea改为标准的闭合方式之后,发现也正常了
<textarea id="name" ></textarea>
确认是textarea的非法闭合导致了上述问题
今天在一个单独页面重现了一下
源代码为:
<div class="login layui-anim layui-anim-up">
<form method="post" class="layui-form" >
...
<textarea id="name" />
</form>
</div>
<script type="text/javascript" th:src="@{lib/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{js/layext/config.js}"></script>
</body>
</html>
在浏览器中打开之后,发现textarea之后的内容都被显示在textarea中,成为它的值,而不是作为页面内容,也就谈不上加载和执行了
<textarea> </form>
</div>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<script type="text/javascript" src="js/layext/config.js"></script>
</body>
</html></textarea>
因为我这一行是写在一个默认隐藏的div里面的,点击编辑按钮才会在弹窗中显示,所以没能够及时发现这个问题,在此简单做个记录。