Javascript-форум - Странное поведение jquery (событие .on)

Есть код

Код:

<html>

 <head>

  <title>Magic Hat</title>

        <script src="jquery-1.9.0.js"></script>

        <script language="JavaScript">

    function showRabbit() 

        {

      var hatImage = $("#topHat");

          hatImage.attr("src", "rabbit-hat.gif");

          var button = $("#hocusPocus");

          button.attr("value", "Get back in that hat!");

          button.on('click', hideRabbit);

    }

        

        function hideRabbit() 

        {

                var hatImage = $("#topHat");

                hatImage.attr("src", "tophat.gif");

                var button = $("#hocusPocus");

                button.attr("value", "Hocus Pocus!");

                button.on('click', showRabbit);

        }

  </script>

 </head>



 <body>

  <h1 align="center">Welcome to the DOM Magic Shop!</h1>

  <form name="magic-hat">

   <p align="center">

    <img src="topHat.gif" id="topHat"/>

    <br /><br />

    <input type="button" value="Hocus Pocus!" id="hocusPocus" onClick="showRabbit();"/>

   </p>

  </form>   

 </body>

</html>

По этому коду при нажатии на кнопку должна меняться и картинка и надпись на кнопке.

При первом запуске страницы при нажатии на кнопку запускается функция showRabbit, меняет картинку и текст кнопки.

Далее снова жмем и запускается функция hideRabbit, меняет картинку и текст кнопки.

И снова жмем кнопку уже ничего не происходит, хотя должна вызываться функция showRabbit. Консоль не выводит ошибку.

function showRabbit() { var hatImage = $("#topHat"); hatImage.attr("src", "rabbit-hat.gif"); var button = $("#hocusPocus"); button.attr("value", "Get back in that hat!"); button.off("click", showRabbit); button.on("click", hideRabbit); } function hideRabbit() { var hatImage = $("#topHat"); hatImage.attr("src", "tophat.gif"); var button = $("#hocusPocus"); button.attr("value", "Hocus Pocus!"); button.off("click", hideRabbit); button.on("click", showRabbit); }

<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> img{ height: 200px } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function(){ var button = $("#hocusPocus"), img = $("#topHat")[0], n = 1; button.click(function() { n ^= 1; button[0].value = n ? "Hocus Pocus!" : "Get back in that hat!"; img.src = n ? "http://www.maxi-gif.com/gif-anime/objets/objets-magies-00003.gif" : "http://img.saraivaconteudo.com.br/Clipart/Photo/138/34521_.jpg"; }); }); </script> </head> <body> <h1 align="center">Welcome to the DOM Magic Shop!</h1> <form name="magic-hat"> <p align="center"> <img src="http://www.maxi-gif.com/gif-anime/objets/objets-magies-00003.gif" id="topHat"/> <br /><br /> <input type="button" value="Hocus Pocus!" id="hocusPocus" /> </p> </form> </body> </html>