click event not firing when attached to elements that are inside of the hidden element when the page loads

click event not firing when attached to elements that are inside of the hidden element when the page loads

i am working on a custom drop down list that has hidden #options DIV which is shown when the user clicks on a button. the problem i am having is that the click event does not seem to be attached to the LI elements since they are hidden when the page first loads. if i show the #options DIV when the page loads everything is working as expected.
i've tried to attach the click event after i show the hidden UL but that didn't work either. here is the code and if anyone could help i would be appreciative. what can i do to make sure the LI click event fires? i tried to put A tag inside of LI and attach click to that but to no avail.

<style type="text/css">
           .gbtn-options {
               overflow-y:auto;
               overflow-x:hidden;
               border:solid 1px red;
               background-color:white;
               white-space:nowrap;
               float:left;
color:#fff;
               position:absolute;
               z-index:9999;
           }
           .gbtn-options ul {
               margin:0px;
               padding:0px;
               list-style-type:none;
               padding:.2em 0;
           }
           .gbtn-options ul li {
               cursor:default;
               padding:.2em;
           }
           .highLight {
               background-color:#316ac5;
               color:white;
           }
           .gbtn-options .highlight {
               background-color:#444;
               color:#fff;
           }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btn').live('click', function (e) {
                $(this).addClass("active");
                $('.gbtn-options').css("left", $(this).eq(0).offset().left).css("min-width", "200");
                $('.gbtn-options').toggle();
            });

            $('#btn').blur(function (e) {
                $(this).removeClass("active");
                $('.gbtn-options').hide();
            });

            $('.gbtn-options ul li').click(function () {
                alert('click');
            });

            $('.gbtn-options ul li').hover(function (e) {
                $(this).toggleClass("highlight");
            });
        });
   </script>


<button id="btn" type="button" class="gbtn"><span><span>Everyone</span></span></button>
    <div id="options" class="gbtn-options" style="display:none;" tabindex="0">
       <ul>
           <li value="E">Everyone</li>
           <li value="S">Some</li>
           <li value="O">Only Me</li>
           <li value="N">Nobody</li>
       </ul>
    </div>