前因

博主在项目中编写前端页面的时候，编写了如下js代码：

<script type="text/javascript"> $(function(){ alert("xxx"); }); </script> <script type="text/javascript" src="jquery/jquery.pagination.js"/> <script type="text/javascript"> $(function(){ alert("yyy"); }); </script>

然后在运行的时候只执行了alert(“xxx”)，而没有执行alert(“yyy”)，这就给我整不明白了。

BUG定位

首先我想到了多个$(function())冲突的可能性，因为$(function(){})这个代码是在页面加载的时候执行的，我怀疑是不是在页面加载的时候只能执行其中一个。 在百度的时候，看到有位老哥说，想知道两个会不会冲突，那你写一下不就知道了，虽然我这里已经有两个$(function(){})，我还是尝试着再加一个进去，代码如下：

<script type="text/javascript"> $(function(){ alert("xxx"); }); </script> <script type="text/javascript" src="jquery/jquery.pagination.js"/> <script type="text/javascript"> $(function(){ alert("zzz"); }); </script> <script type="text/javascript"> $(function(){ alert("yyy"); }); </script>

此时运行的结果变成了只执行alert(“xxx”)和alert(“yyy”)，而不执行alert(“zzz”)，错误已经很明显了，肯定是这句代码出问题了，导致跟在它后面的代码无法执行：

<script type="text/javascript" src="jquery/jquery.pagination.js"/>

将上述代码与网上引入js文件的代码进行对比，很容易的就可以发现，网上的代码是这样的：

<script></script>

而我的是这样的

<script/>

我的这种写法导致引入pagination.js文件的《script》标签与后续需要执行代码的《/script》相匹配，从而导致代码未执行。

BUG修复

修改代码如下：

<script type="text/javascript"> $(function(){ alert("xxx"); }); </script> <script type="text/javascript" src="jquery/jquery.pagination.js"></script> <script type="text/javascript"> $(function(){ alert("yyy"); }); </script>