C# MVC ajax call to database with a popup model does not recognize cancel button click

Question

I have a c# application which displays a webgrid populated by a database. When I double click on a grid element, jquery captures the double click, determines the row of the grid, finds the ID column and does an ajax call to pass the ID back to my controller. Ajax is instructed to expect html as the response.

When the controller receives the ID from the view, it reads the record from the database with that ID, populates a list with a set of fields, and passes that list as a parameter to a partial view.

The partial view returns html to the ajax call. The html includes a form where the database fields are displayed in text boxes so the user can update the data. There is a submit button and a cancel button at the bottom of the form.

The is the ajax code:

$("body").on("dblclick", "#WebGrid td", function () {
        var row = $(this).closest("tr");
        var FirstName = row.find("td").eq(1).text();
        var LastName = row.find("td").eq(2).text();
        var ID = row.find("td").eq(0).text();

        $.ajax({
            url: "/Home/Details",
            type: "POST",
            data: { ID: ID, FirstName: "", LastName: "", EmailAddress: "", EmailType: "" },
            dataType: "html",
            success: function (result) {

                $('#dialog').html(result);
                $('#dialog').dialog('open');
            },
            failure: function (result) {
                alert("FAILURE " + result.responseText);
            },
            error: function (result) {
                alert("ERROR " + result.responseText);
            }
        });

        return false;
    });

And this is how I define the division that the returned html gets placed into:

<div id="dialog" style="display: none">
</div>

And this is the function that I have:

$(function () {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        title: "Update"
    });
});

When I run the application, and I double click on a grid item and the partial view gets passed back to the ajax call, the dialog division gets displayed correctly with the data from the database.

The problem is when I click on the Cancel button nothing happens. And I do not get the 'cancel button clicked' message on the console. I have this code to capture the click of the cancel button:

$("#btnCancel").on('click', function (event) {
    console.log("cancel button clicked");
    $('#dialog').hide;
    toastr.warning("Your update has been cancelled");
    clear();
    display();
});

Any suggestions? Thank you.

edit:

Here is the entire code of the initial View where the grid is rendered:

@model List<CodingChallengeV4.ViewModels.ContactPassData>
@{
    ViewBag.Title = "UpdateAllData";
}
@{
Layout = null;
WebGrid grid = new WebGrid(source: Model, canPage: true, canSort: false);
}
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"> 
</script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

<!-- Latest compiled JavaScript -->
<!-- add thids links for the error message-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<style type="text/css">

.Grid {
    border: 1px solid #ccc;
    border-collapse: collapse;
}

    .Grid th {
        background-color: #F7F7F7;
        font-weight: bold;
    }

    .Grid th, .Grid td {
        padding: 5px;
        width: 150px;
        border: 1px solid #ccc;
    }

    .Grid, .Grid table td {
        border: 0px solid #ccc;
    }

        .Grid th a, .Grid th a:visited {
            color: #333;
        }
</style>
<h2>Update All Contacts</h2>
@grid.GetHtml(
   htmlAttributes: new { @id = "WebGrid", @class = "Grid" },
    columns: grid.Columns(
grid.Column(header: "", format:@<text><div class="edit" data-id="@item.passedID" data-propertyname="passedID">@item.passedID</div></text>),
grid.Column(header: "First Name", format:@<text><div class="edit" data-id="@item.passedID" data-propertyname="passedfName">@item.passedfName</div></text>),
grid.Column(header: "Last Name", format:@<text><div class="edit" data-id="@item.passedID" data-propertyname="passedlName">@item.passedlName</div></text>),
grid.Column(header: "eMail Address", format:@<text><div class="edit" data-id="@item.passedID" data-propertyname="passedeMail">@item.passedeMail</div></text>),
grid.Column(header: "eMail Type", format:@<text><div class="edit" data-id="@item.passedID" data-propertyname="passedeMailTypeString">@item.passedeMailTypeString</div></text>)
)
)
<div id="dialog" style="display: none;" >
</div>
<script>
  $(function () {
    $("#dialog").dialog({
        autoOpen: false,
        modal: true,
        title: "View Details"
    });
  });
  $(document).ready(function () {

    $('#toast-container').find('.toast-top-center').removeClass('.toast-top-center');
    toastr.options = {
        "closeButton": true,
        'autoWidth': false,
        "debug": false,
        "newestOnTop": true,
        "progressBar": true,
        "positionClass": "toast-center-center",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "3000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }

    $("#btnCancel").on('click', function (event) {
        console.log("cancel button was clicked");
        $('#dialog').dialog('hide');
        toastr.warning("Your update has been cancelled");
        clear();
        display();
    });

    $("body").on("dblclick", "#WebGrid td", function () {
        var row = $(this).closest("tr");
        var FirstName = row.find("td").eq(1).text();
        var LastName = row.find("td").eq(2).text();
        var ID = row.find("td").eq(0).text();

        $.ajax({
            url: "/Home/Details",
            type: "POST",
            data: { ID: ID, FirstName: "", LastName: "", EmailAddress: "", EmailType: "" },
            dataType: "html",
            success: function (result) {
              $('#dialog').html(result);
              $('#dialog').dialog('open');
            },
            failure: function (result) {
                alert("FAILURE " + result.responseText);
            },
            error: function (result) {
                alert("ERROR " + result.responseText);
            }
        });

        return false;
    });
    });
</script>