javascript - MVC 在局部 View 中使用 JS

Question

在我的主视图中，我有 ajax 操作链接

例如

  @Ajax.ActionLink("Update Hours", "companyhours", "business",
 new { Id = ViewBag.Id }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "divCurrentView" })

Controller 内部

 public ActionResult CompanyHours(string Id)
    { ...   return PartialView("UpdateCompanyHours", model);}

View 在点击时加载

我有部分 View “UpdateCompanyHours.cshtml”

@model CompanyHoursVM
@{Layout = null; }
@using (Ajax.BeginForm("CompanyHours", new AjaxOptions { UpdateTargetId = "presult", HttpMethod = "POST", InsertionMode = InsertionMode.Replace }))
{     
  @Html.ValidationSummary(true)
  @Html.AntiForgeryToken()

  // i have textboxes and a button - everything loads fine
  @Html.CheckBoxFor(model => model.Open247, new { @class = "Time24hrs"})
 }

问题是:

我想在我的主视图中添加我的 js 文件。在主视图页面底部添加代码:

@section Scripts
{
    <script src="~/Scripts/myjs.js"></script>
}

甚至没有@section Scripts 标签

js文件很简单。第一个警报被执行但点击它没有

(function () {
$(function () {
    alert("alert1");
    $('.Time24hrs').click(function () {
        alert("alert2");
    });
});
})();

js没有被识别。但是，如果我在局部 View 中添加 js 文件，它就可以正常工作

如何在主视图中加载js文件并在局部 View 中使用js文件？

Answer 1

当您单击“更新时间”链接时，ajax 代码会动态地将新的 DOM 元素注入(inject)当前的 dom(来自局部 View 的标记)。但是您的点击事件已注册到现有元素(页面加载时的当前元素)。没有为这些新的 dom 元素注册点击事件处理程序。

使用jQuery on 方法绑定(bind)点击事件。使用 on 方法，您可以为 DOM 的当前和 future 元素注册事件

这应该有效。

$(function () {

    $(document).on("click",".Time24hrs",function () {
        alert("alert2");
    });

});