Buttons do not work inside my "swiper" slider. Am i missing something basic ?

Buttons do not work inside my "swiper" slider. Am i missing something basic ?

Hi
I recently tried to use the "swiper" slider by iDangerous.
Everything worked fine until i tried to move my interactive button on one of the slides itself.
Here is a short version of my first try out of the "swiper".
1. In this version everything worked perfectly fine.(Because the button is placed outside the slides)
2. In this version of the site the interactive button doesn't behave correctly. It jumps to the next slide and displays NO alert.(So basicaly it doesn't do what it's supposed to do)
I would be glad if someone could possibly help me with this issue.
Thank you.
  1. <!DOCTYPE html>
        <html>
            <head>
            <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="style.css">
            <link rel="stylesheet" type="text/css" href="swipe.css">
            <link rel="stylesheet" href="css/idangerous.swiper.css">
            <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
            </head>
          
            <body>
            //Maintitle outside the "swiper" HTML       
            <div class="maintitle">
            <h1 class="big">TITLE</h1>
            <a><h1>THEINTERACTIVEBUTTON</h1></a>
            </div>

            //THE "swiper" HTML        
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide red-slide">
                        <div class="title"><h2>FIRSTSUBTITLE</h2></div>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
                     </div>
                </div>
            </div>
            // Essential jQuery for the "swiper"  
            <script src="js/zepto.min.js"></script>
            <script src="js/idangerous.swiper-2.1.min.js"></script>         
            <script>
            window.onload = function() {
              var mySwiper = new Swiper('.swiper-container',{
                //Your options here:
                speed:'200',
                mode:'horizontal',
                loop: true,
                //etc..
              });
            }

            /*
            Or with jQuery/Zepto
            */
            $(function(){
              var mySwiper = $('.swiper-container').swiper({
                //Your options here:
                speed:'200',
                mode:'horizontal',
                loop: true,
                //etc..
              });
            })
            </script>
            // Essential jQuery for the my interactive button         
            <script>
            $(function(){
            $('a h1').on('click', function(){
            window.alert('THEBUTTONWORKS');
            });
            });
            </script>
            </body>  
        </html>
































































  2. <!DOCTYPE html>
        <html>
            <head>
            <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="style.css">
            <link rel="stylesheet" type="text/css" href="swipe.css">
            <link rel="stylesheet" href="css/idangerous.swiper.css">
            <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
            </head>
          
            <body>
            //THE "swiper" HTML        
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide red-slide">
                        <div class="title"><h2>FIRSTSUBTITLE</h2></div>
                        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
                     </div>
                     <div class="swiper-slide red-slide">
                        //Maintitle inside the "swiper" HTML       
                        <div class="maintitle">
                            <h1 class="big">TITLE</h1>
                            <a><h1>THEINTERACTIVEBUTTON</h1></a>
                        </div>
                    </div>
                </div>
            </div>
            // Essential jQuery for the "swiper"  
            <script src="js/zepto.min.js"></script>
            <script src="js/idangerous.swiper-2.1.min.js"></script>         
            <script>
            window.onload = function() {
              var mySwiper = new Swiper('.swiper-container',{
                //Your options here:
                speed:'200',
                mode:'horizontal',
                loop: true,
                //etc..
              });
            }

            /*
            Or with jQuery/Zepto
            */
            $(function(){
              var mySwiper = $('.swiper-container').swiper({
                //Your options here:
                speed:'200',
                mode:'horizontal',
                loop: true,
                //etc..
              });
            })
            </script>
            // Essential jQuery for the my interactive button         
            <script>
            $(function(){
            $('a h1').on('click', function(){
            window.alert('THEBUTTONWORKS');
            });
            });
            </script>
            </body>  
        </html>