problem binding to anchor click event - where anchor is 'inside' div loaded to blockUI

problem binding to anchor click event - where anchor is 'inside' div loaded to blockUI

In an ASP.NET MVC I have a view with this code (most removed for clarity):

<html  lang="en">
<head>
    <title>Registration</title>
</head>
<body>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<link type="text/css" href="/Content/Styles/style.css" rel="stylesheet">
<link type="text/css" href="/css/jquery.jgrowl.css" rel="stylesheet">
<link type="text/css" href="/Content/Styles/scrollbars.css" rel="stylesheet">
<link type="text/css" href="/Content/Styles/smoothness/jquery-ui.css" rel="stylesheet">
<link rel="stylesheet" href="/Content/Styles/intlTelInput.css" type="text/css">
<link href="/Content/Styles/thickbox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/Scripts/2012.1.419/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Scripts/jQuery/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/jQuery/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript" src="/Scripts/jQuery/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.jgrowl.js"></script>
<script type="text/javascript" src="/Scripts/knockout-3.0.0.debug.js"></script>
<script type="text/javascript" src="/Scripts/kendo.all.min.js"></script>
<script type="text/javascript" src="/Scripts/thickbox.js"></script>
<div role="main">
<script type="text/javascript" src="/Scripts/2012.1.419/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.jgrowl.js"></script>
<div class="content">
...
</div>
<form action="/Go/Registration" data-ajax="true" data-ajax-begin="RegistrationOnBegin" data-ajax-success="RegistrationOnSuccess" id="form0" method="post">

.......


</form>
<style>
    .blockUi
    {
        position: absolute;
        border: 5px solid gray;
        padding: 10px;
        background: white;
        width: 280px;
        height: auto;
        top: -5px;
        left: -5px;
    }
</style>

    <div id="errorPopUp" class="blockUi" style="display: none;">
        <a href="#" id="close" style="float: right">Close</a>
        <h2>Error</h2>
        <div id="divPopUpError"></div>
    </div>

</div>

<script src="/scripts/plugins.js" type="text/javascript"></script>
<script src="/scripts/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
        var index = 1;
        $(document).ready(function () {

        function RegistrationOnBegin() {
            if ($('#password').val() !== $('#confirmPassword').val())
            {
                ShowError('Passwords entered do not match.');
                return false;
            }

            $.blockUI({ message: '<div>Processing...</div>', css: { backgroundColor: '#000', color: '#fff', width: '100px' } });
        }

        function RegistrationOnSuccess(response) {
            if (response.status == "fail") {
                ShowError(response.message);
                return false;
            }
            else
                window.location.href = response.message;
        }

        function ShowError(message) {
            if (message == null)
                $('#divPopUpError').html("Uh oh, an error occurred. Please try again later.");
            else
                $('#divPopUpError').html(message);

            $.blockUI({ message: $('#errorPopUp'), css: { width: '1px', top: '50%', left: '40%', cursor: 'pointer' } });

            $("html").live("click", "#close", function () {
                $.unblockUI();
            });
        }

    </script>
</body>
</html>


Registration There is a form in the page when posted,  a javascript  function in the page, RegistrationOnBegin, is called. When server responds another javascript function in the page, RegistrationOnSuccess is called. Depending on the server response, this RegistrationOnSuccess will call blockUI passing in the #errorPopUp div, which you can see in the html, stype="display: none" This will cause a 'dialog' to display with a message and in the upper right hand corner, an anchor with a "Close".

I wanted to bind a click event handler to this so user can click it and unblock the ui.


I tried several ways to do this but the only way I successfully got to bind a click event handler was

            $("html").live("click", "#close", function () {
                $.unblockUI();
            });

But I don't like it. Nothing else worked though. Using .on didn't work. Trying to add an onclick attribute to the anchor didn't work. Some of the problems definitely have to do with binding event handlers to 'dynamica' elements like the #errorPopUp div. The call to $.blockUI moves it around on the page.
Is there any other way to bind to the anchor tag within that div, without using the html selector and the .live function?