jquery脚本（onchange方法）在将部分视图作为ajax返回后不起作用

Question

我的部分观点： 这是处理下拉列表更改的脚本；我想在更改后向控制器发送请求

@model Bekr.Helper.BekrJson

@{
    List<string> Types = new List<string>() { "متن", "عدد", "bool", "آبجکت", "آرایه" };
    var InputType = new SelectList(Types,Model.typ);
    var tt = $"detail{TempData["index"]}";
    var divtt = $"div{TempData["index"]}";
    }
<script src="~/Scripts/jquery-2.2.4.js"></script>
<script src="~/Scripts/jquery-2.2.4.intellisense.js"></script>

 <div class="col-md-12 q">

    <div class="col-md-5">
        @Html.TextBox($"[{(int)TempData["index"]}].key", Model.key, new { @class = "form-control", placeholder = "کلید را وارد نمایید..." })
    </div>

    <div class="col-md-2">
            @Html.DropDownList($"[{(int)TempData["index"]}].typ", InputType, new { style = "width:100%",id=$"{tt}" })
    </div>
    <div class="col-md-5">
        @Html.TextBox($"[{(int)TempData["index"]}].value", Model.value, new { @class = "form-control", placeholder = "مقدار را وارد نمایید...", style = "margin-top:1px;" })
    </div>

</div>
<div id="@divtt">

</div>

<script>
    
        $('#@tt').on('change', function () {
        $.ajax({
                url: "/Items/InputValueType/" + $('#@tt').val(),
                type: "GET",
                success: function (data) {
                    $('#@divtt').html(data);
                }
            })

        })
    
   
</script>

在此视图中返回部分视图：

@model Bekr.DB.cmn_Item
@using Bekr.Helper

@{ 
    TempData["JsonList"] = Model.KeyValueList.Count;
}



@using (Ajax.BeginForm((string)ViewBag.Action, "Items", null, new AjaxOptions { UpdateTargetId = "111", InsertionMode = InsertionMode.Replace, HttpMethod = "POST" }))
{
<div class="create-edit-item" id="">

        @Html.AntiForgeryToken()
        <button type="submit" class="btn btn-xs btn-success">ثبت</button>

        @Html.TextBoxFor(x => x.cmn_Items_Name, new { @class = "form-control", placeholder = "عنوان را وارد نمایید..." })

        @for (int i = 0;  Model.KeyValueList != null  && i < Model.KeyValueList.Count ; i++)
        {
            @Html.Action("EditSingleJson", new { listJson = Model.KeyValueList, index = i });
        }
        <div id="NewJson">

         
        </div>


        @Ajax.RawActionLink(string.Format("<i class='fa fa-plus' aria-hidden='true'></i>"+
        "<i class='fa fa-plus' aria-hidden='true'></i>"), "CreateSinglejson", "Items", new {jsonList=Model.KeyValueList }, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.InsertAfter, UpdateTargetId = "NewJson" }, new { @class = "btn btn-success btn-xs", id = " " })

     


            @Html.HiddenFor(x => x.cmn_Items_Type)
            @Html.HiddenFor(x => x.cmn_Items_Id)
        @Html.HiddenFor(x => x.cmn_Items_Info)
   
</div>


}

在 div 中加载 ajax 时，onchange 方法不适用于局部视图

Answer 1

首先将id 转换为class，因为jQuery 无法识别多个相同的ID（jQuery 将id 视为单独的选择器）。

然后改变如下：-

$(document).on('change','.@tt',function(){

这叫：-event delegation