今天心血来潮，突然想撸几行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标签也成为并列关系
总结：很奇怪为什么用简写的结束标签会出现该问题。
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
