applying bind > delay > unbind - seems the delay is ignored..

applying bind > delay > unbind - seems the delay is ignored..

applying bind > delay > unbind - seems the delay is ignored..
why is that?

  1. <html>
    <head>
        <style type="text/css">
            div#button {
                background: red;
                width: 200px;
                height: 200px;
            }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var i = 0;
            $(function(){
                $('#button').bind('click', counter).delay(10000).unbind('click', counter);
            });
            function counter(){
                if(i == 0) {
                $('<p id="counter"></p>').appendTo('body')
                }
                $('#counter').text('click counter: ' + i)
                i++
            }
        </script>
    </head>
    <body>
        <div id="button"></div>
    </body>
    </html>