Jquery 不使用异步更新请求呈现局部视图 我的目标

是在我的jquery文件（otf.js）中进行异步调用，以更新我主页（index.cshtml）中的餐厅列表，并在表单中输入搜索词以过滤餐厅结果otf.js是一个捆绑包，在布局视图中呈现

---

我的问题

---

我输入一个搜索词并提交表单，列表会按预期更新，但当输入一个新搜索词并单击“提交”时，列表不会更改。每次我输入新的搜索结果并单击“提交”时，它都需要更改

---

我的源代码 otf.js

---

---

index.cshtml

---

@model IEnumerable
@{
ViewBag.Title=“主页”；
}

@Html.Partial（“\u餐厅”，模型）

---

_Restaurants.cshtml（局部视图）

---

@model IEnumerable
@foreach（模型中的var项目）
{
@项目名称
@item.City，@item.Country
评论：@item.CountOfReviews

}

问题是

正在index.cshtml中的

@Html.Partial（“\u Restaurants”，Model）

行周围缠绕，需要在部分视图\u Restaurants.cshtml中缠绕

@foreach

代码块

我对我的代码做了这样的更改，而且，每次我点击搜索按钮时，餐厅列表都会更新，而不仅仅是第一次

---

现在唯一的问题是，为什么这会导致列表在第一次更新后不更新？

看起来您正在从DOM中删除表单，以用新表单替换。在这种情况下，您应该委派事件

因此：

Been:{这里我使用文档作为委托，但更好的方法是使用表单中最接近的静态容器}

$(document).on('submit',"form[data-otf-ajax='true']",ajaxFormSubmit);

---

这是一个问题还是一个答案，还是两者兼而有之？

@model IEnumerable<OdeToFood.Models.RestaurantListViewModel>

@{
    ViewBag.Title = "Home Page";
}
<hr />

<form method="get" action="@Url.Action("index")"
        data-otf-ajax="true" data-otf-target="#restaurantList">
    <input type="search" name="searchTerm" />
    <input type="submit" value="Search By Name" />
</form>

<div id="restaurantList">
    @Html.Partial("_Restaurants", Model)
</div>

@model IEnumerable<OdeToFood.Models.RestaurantListViewModel>

   @foreach (var item in Model)
    {
        <div>
            <h4>@item.Name</h4>
            <div>
                @item.City, @item.Country

            </div>
            <div>
                Reviews: @item.CountOfReviews

            </div>
            <hr />

        </div>
    }

$("form[data-otf-ajax='true']").submit(ajaxFormSubmit);

$(document).on('submit',"form[data-otf-ajax='true']",ajaxFormSubmit);