今天心血来潮,突然想撸几行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标签也成为并列关系
总结:很奇怪为什么用简写的结束标签会出现该问题。