jquery event won't work on dynamically created elements within a form that is also dynamically created

Question

So I have an ASP.NET MVC View that holds two partial views. Those partial views get loaded dyamically via ajax calls to controller methods. This happens when the user changes the date via calendar popup. Those partial views also contain another partial view that is dynamically loaded via an ajax call also. The problem is that my click events will not work in my most inner partial view if the outer partial view changes via ajax. In the code below I have

    $("input[name=cancelProduct]").on('click', function() {
            $("#manageProductDialog").data("kendoWindow").close();
    });

This does not work when I change the date since ManageProduct.cshtml is being generated dynamically. So I've tried these also

    $("#productView").on('click', 'input[name=cancelProduct]', function(e) {
        $("#manageProductDialog").data("kendoWindow").close();
    });

    $("#manageProductDialog").on('click', 'input[name=cancelProduct]', function(e) {
        $("#manageProductDialog").data("kendoWindow").close();
    });

These do not work either. Anyone got any ideas? Below are all my views/partial views.

Index.cshtml

    <input id="calendar" style="width:0px;" />
    <input type="button" value="Search Date" id="datePicker" />

    <ul>
        <li><div id='productView'>@Html.Partial("ProductList")</div></li>
        <li><div id='categoryView'>@Html.Partial("CategoryList")</div></li>
    </ul>

    <script type='text/javascript'>
    $("document").ready(function() {
        $("#calendar").kendoDatePicker({ });

        $("#calendar").data("kendoDatePicker").value('@DateTime.Now.ToShortDateString()');
        $("#datePicker").on('click', function() {
            $("#calendar").data("kendoDatePicker").open();
        });

        $("#calendar").on('change', function() {
            $.ajax({
              type: 'POST',
              url: serverRoot + 'Product/ViewProducts',
              data: { searchDate: $("#calendar").val() },
              success: function(data) {
                 $("#productView").html(data);
              }
            });

           $.ajax({
              type: 'POST',
              url: serverRoot + 'Category/ViewCategories',
              data: { searchDate: $("#calendar").val() },
              success: function(data) {
                 $("#categoryView").html(data);
              }
            });
        });
    });
    </script>

ProductList.cshtml

    @model IList<Stuff.Web.Models.ProductVM>

    <a id='addProduct' href='#'>Add Product</a>

    @if (Model != null && Model.Count > 0)
    {
        <table class='grid'>
            <tr>
                <td>Name</td>
                <td>Price</td>
                <td>&nbsp;</td>
            </tr>

            for (int i = 0; i < Model.Count; i++)
            {
                <tr>
                    <td>@Model[i].Name</td>
                    <td>@Model[i].Price</td>
                    <td>
                        <a id='edit_@Model[i].Id' class='edit'>Edit</a>
                        <a id='remove_@Model[i].Id' class='remove'>Remove</a>
                    </td>
                </tr>
            }
        </table>
    }
    <div id='manageProductDialog' style='display:none;'></div>

    <script type='text/javascript'>
        var manageProductDialog = $("#manageProductDialog");

        if (!manageProductDialog.data("kendoWindow")) {
            manageProductDialog.kendoWindow({
                width: "700px",
                height: "550px",
                modal: true
            });
        };

        $("#addProduct").on('click', function(e) {
            e.preventDefault();

            manageProductDialog
            .data("kendoWindow")
            .title("Add Product")
            .content("Loading Page...")
            .center()
            .open()
            .refresh({
                url: '@Url.Action("ManageProduct", "Product")'
            });

            return false;
        });
    </script>

ManageProduct.cshtml

    @model Stuff.Web.Models.ProductVM

    @using (Ajax.BeginForm("ManageProduct", "Product", new AjaxOptions {
        OnSuccess = "submitSuccess",
        Failure = "submitFailure
    }))
    {
        @Html.HiddenFor(x => x.Id)

        <table class='form'>
            <tr>
                <td>@Html.Label("Name"):</td>
                <td>@Html.EditorFor(x => x.Name)</td>
            </tr>

            <tr>
                <td>@Html.Label("Price"):</td>
                <td>@Html.EditorFor(x => x.Price)</td>
            </tr>
            <tr>
                <td colspan='2'>
                    <input type='submit' value="Save" />
                    <input type='button' name='cancelProduct' value="Cancel" />
                </td>
            </tr>
        </table>
    }

    <script type='text/javascript'>
        $("input[name=cancelProduct]").on('click', function() {
            $("#manageProductDialog").data("kendoWindow").close();
        });
    </script>