.clone(true) does not copy the event handlers

I created a simple plugin for creating a modal box. the problem is
inspite of using .clone(true), i am not able to get the events bound
with cloned elements
Here is my plugin:
$.fn.modal = function(options)
{
    var defaults={
        overlay        :    true,
        height        :    500,
        width        :    400,
        border        :    0,
        borderColor    :    '#666',
        showClose    :    1
    };
    var options = $.extend(defaults,options);
    return $(this).each(function()
    {
        if($(this).is('[name=modal]'))
        {
            var cid = $(this).attr('href');
            var id=$(cid).clone(true);
            $(this).click(function(e)
            {
                e.preventDefault();
                if(($('body').find('#overlay').length<1) &&
(options.overlay==true))
                    $('body').append('<div id="overlay"></div>');
                var overlayHeight = $(window).height();
                var overlayWidth = $(window).width();
                if($.browser.msie && $.browser.version <= 6.0)
                    var overlayHeight = $(document).height();
                $('#overlay').css({'width':overlayWidth,'height':overlayHeight});
                $(id).css({'width':options.width,'height':options.height});
                var winH = $(window).height();
                var winW = $(window).width();
                var dH = options.height;
                var dW = options.width;
                //Set the popup window to center
                $(id).css('top', ((winH-dH)/2))
                     .css('left', ((winW-dW)/2))
                     .css('border','solid '+options.border+'px
'+options.borderColor);
                $('#overlay').show();
                html = $(cid).html();
                $(id).html('');
                if($(id).find('.titleBar>.close').length < 1)
                    $(id).prepend('<div class="titleBar" id="1"><a href="#"
class="close">Close</a></div>');
                if($(id).find('.windowContent').length < 1)
                    $(id).append('<div class="windowContent"></div>');
                $(id).find('.titleBar').css({
                                    'height'    : '20px',
                                    'padding'    : '7px 5px 0px 0px',
                                    'text-align': 'right'
                                    });
                $(id).find('.windowContent').css({
                                    'height'    : (options.height-20-10).toString()+'px',
                                    'padding'    : '5px 5px'
                                    });
                $(id).find('.windowContent').html(html);
                $(id).find('.close').click(function(e){
                    $(id).hide();
                    $('#overlay').hide();
                });
                //$(cid).show();
                $(id).insertAfter($(cid)).show();
            });
        }
    });
};
My html is
<a href="#dialog" name="modal">Click me</a>
<div id="dialog" class="window">
    <div>
        For editing , we need to authenticate you.
        Please enter the user name and password for continuing this process.
    </div>
    <div id="controls">
        <ul class="mod">
            <li>User name</li>
            <li><input type="text" name="username" id="username"
class="required" /></li>
            <li>Password</li>
            <li><input type="password" name="password" id="password"
class=required"/></li>
            <li><input type="button" value="Authenticate" id="authBut"/></li>
        </ul>
    </div>
</div>
<script>
$('#authBut').click(function(){
    alert(1);
});
</script>
Here my input button id authBut is cloned as well in the new modal,
but i am not getting any alerts which i get in origional one.
pls help.