How do I close a dialog using jQuery?

I am using the code below to create a jQuery UI Dialog widget dynamically:

 $(function () {
        var Selector = $("a:contains('sometext')");
        $(Selector).bind('click', function () {
            var NewDialog = "<div dir=rtl id='MenuDialog'></div>";
            var DialogContetn = '<div dir=rtl ><table width=100%><tr><td><textarea id="txtRequestContent" cols="30" rows="2"></textarea></td><td><table><tr><td><input id="btnSendEditionRequest" type="button" value="Send" /></td></tr><tr><td><input id="btnCloseDialog" type="button" value="Cancel" /></td></tr></table></td></tr></table></div>';
            $('body').append(NewDialog);
            $('#MenuDialog').html(DialogContetn);
            $('#MenuDialog').hide();
            $('#MenuDialog').dialog({ modal: true, title: "title", show: 'clip', hide: 'clip' });
            $("#btnCloseDialog").live('click', function () {
                $("#MenuDialog").dialog('close');
            });
            return false;
        });
    });

First time it loads, the jQuery Dialog works correctly and when I click on the btnCloseDialog the jQuery Dialog closes successfully.

However, after that, the btnCloseDialog no longer closes the dialog. Why is this happening?

Update

I put my code out on a jsfiddle.

This is strange behavior because the button closes the dialog properly in the jsFiddle, but not on the dialog in my project.