jquery事件不适用于动态创建的表单中动态创建的元素

Question

所以我有一个ASP.NET MVC视图，它包含两个部分视图。这些部分视图通过对控制器方法的ajax调用以动态方式加载。当用户通过日历弹出窗口更改日期时会发生这种情况。这些部分视图还包含另一个通过ajax调用动态加载的局部视图。问题是，如果外部局部视图通过ajax更改，则我的单击事件将无法在我最内部的局部视图中工作。在下面的代码中我有

useDynLib(fooR)
exportPattern("^[[:alpha:]]+")

当我自动生成ManageProduct.cshtml以来更改日期时，这不起作用。所以我也试过这些

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

这些也不起作用。有人有任何想法吗？以下是我的所有观点/部分观点。

Index.cshtml

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

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

ProductList.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>

ManageProduct.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>