jquery事件嵌套出现的问题怎么去解决？？？

jquery事件嵌套出现的问题怎么去解决？？？

前言 –引入问题

在开发过程中我们总会不经意间把一个事件嵌套到另一个事件中，其实这是很危险的，BUG会一个接一个的来，而且如果你不了解事件嵌套与绑定的原理，那么就很难发现问题的所在之处，因为按照正常思维来说，这是可行的，而且程序逻辑不会有什么问题。那么到底是什么导致了事件嵌套出现了问题呢？

事件嵌套与绑定
先来一个简单的程序模型来认识一下事件的嵌套和绑定：

<script>
     $('Btn1').click(function () {
            //Btn1触发点击事件后要执行的代码
            $('Btn2').click(function () {
                //Btn2触发点击事件以后要执行的代码
            });
        });
</script>

以上就是一个简单的事件绑定和事件嵌套的模型，Btn2嵌套在Btn1中，按照正常逻辑就是这样写的啊，

eg：我在Btn1点击之后弹出来一个模态框，Btn2存在于这个模态框中，一般我们逻辑就是——我只有点击了Btn1之后才能去点击Btn2，所以我要把处理点击Btn2的程序放在Btn1事件里面，这样想是没错的！但是，这也给我们带来了很多BUG，

eg，最基本的BUG，按照上面的想法写的话，当你点击一下Btn1一次的时候，再去点击Btn2，Btn2里面的程序执行一次，再点击一次Btn1，然后再点击Btn2，Btn2里面的程序会执行两次，于是你就会发现，你点击几次Btn1，接着你只要触发Btn2的点击事件，Btn2它里面的程序就会执行几次。这冥冥中好像有个计数器在记录我点击了几次Btn1，而且会让Btn2里面的程序的执行次数等于我点击Btn1的次数。就像是在Btn2点击事件外面加了一个循环一样，只不过这个循环次数就等于我点击Btn1的次数，这实在是让人捉急!

解决方案 1——避免嵌套
那么怎么去解决这种BUG呢?其实我们知道，每个事件都是可以独立的，我们尽量把Btn2的事件绑定写在Btn1事件绑定的外面，这样你每次不管点击几次Btn1都会再给Btn2绑定多次click事件了！

<script>
        $('Btn1').click(function () {
               //Btn1触发点击事件后要执行的代码
           });
           $('Btn2').click(function () {
                   //Btn2触发点击事件以后要执行的代码
               });
   </script>

解决方案 2——嵌套
在jQuery中，有一个对事件绑定的方法unbind(),就是可以帮多绑定的事件全局解除掉，这样就不会因为Btn1的多次点击而带来BUG了。

 <script>
        $('Btn1').click(function () {
               //Btn1触发点击事件后要执行的代码
               $('Btn2').unbind('click').click(function () {
                   //Btn2触发点击事件以后要执行的代码
               });
           });
   </script>