C# jquery事件获胜'；t在同样是动态创建的表单中处理动态创建的元素

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

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

由于动态生成ManageProduct.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();
    });

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

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>

@Html.Partial（“产品列表”）
@Html.Partial（“分类列表”）

$（“文档”）.ready（函数（）{
$（“#日历”）.kendoDatePicker（{}）；
$（“#calendar”）.data（“kendoDatePicker”）.value（“@DateTime.Now.ToSortDateString（）”）；
$（“#日期选择器”）。在（'click'，function（）上{
$（“#日历”）.data（“kendoDatePicker”）.open（）；
});
$（“#日历”）。在（'change'，function（）上{
$.ajax({
键入：“POST”，
url:serverRoot+“产品/视图产品”，
数据：{searchDate:$（“#日历”）.val（）}，
成功：功能（数据）{
$（“#产品视图”）.html（数据）；
}
});
$.ajax({
键入：“POST”，
url:serverRoot+“类别/视图类别”，
数据：{searchDate:$（“#日历”）.val（）}，
成功：功能（数据）{
$（“#categoryView”）.html（数据）；
}
});
});
});

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>

@model-IList
@if（Model！=null&&Model.Count>0）
{
名称
价格
for（int i=0；i

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>

@model Stuff.Web.Models.ProductVM
@使用（Ajax.BeginForm（“ManageProduct”，“Product”），新的AjaxOptions{
OnSuccess=“submitSuccess”，
Failure=“submitFailure
}))
{
@Html.HiddenFor（x=>x.Id）
@Html.Label（“名称”）：
@EditorFor（x=>x.Name）
@Html.Label（“价格”）：
@EditorFor（x=>x.Price）
}
$（“输入[name=cancelProduct]”）。在（'click'，function（）上{
$（“#manageProductDialog”）.data（“kendoWindow”）.close（）；
});

尝试使用文档：

$（文档）。在（'click'，'input[name=cancelProduct]“

no。只有在首次加载表单时才有效。一旦表单通过日期更改动态生成，它就会停止工作。不过，谢谢。您不应该在局部视图中使用javascript，您应该将其全部移动到父视图。@如果您担心这一点，请将代码放在单独的javascript文件中。我发现没有部分中的hat-javascript几乎总是会引起问题。