JS代码踩坑记

今天心血来潮,突然想撸几行JS代码,没想到短短的几行代码居然出了BUG,代码如下:

<html>
<head>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"/>
    <script type="text/javascript">
        $(function () {
            $("#input1").bind("input propertychange",function () {
                var value = $("#input1").val();
                alert(value);
                $("#input2").val(value);
            });
        });
    </script>
    <title>监听文本框</title>
</head>
    <br>
    <br>
    <br>
    <input type="text" id="input1"/>
    <input type="text" id="input2"/>
</body>
</html>

这段代码很简单,其功能是监听第一个输入框,当它的值发生变化时,同步修改第二个输入框的值,使两者同步变化。用浏览器执行时发现并没有实现预期的效果,第一个框的值改变时,第二个框竟不为所动。控制台无错误提示,在JS代码处打断点不生效。经过初步排查,原因应该是这段JS代码未生效,相关事件并没有被绑定到DOM元素上。查看控制台的Elements选项卡,发现如下端倪:

第一个script标签后的结束标志不见了,而我的源代码中是有结束标志的

而且看Elements中两个script标签的布局方式是将第二的script标签做了缩进处理,于是我怀疑浏览器在解释这俩script标签时是把两个并列关系的script标签当成了父子关系来处理,即第二行的script标签成了第一行script标签的子标签,由于script标签加上src属性后,其内部的JS代码就不再执行,所以导致了预期效果未能实现。于是做了如下修改:

修改后,功能实现,控制台Elements选项卡中script标签也成为并列关系

总结:很奇怪为什么用简写的结束标签会出现该问题。

发布了30 篇原创文章 · 获赞 30 · 访问量 8238

猜你喜欢

转载自blog.csdn.net/IT_GJW/article/details/85108389