替换视图时，MVC 部分视图中的 Javascript 停止工作答案

【问题标题】：Javascript in MVC Partial view stops working when View is replaced替换视图时，MVC 部分视图中的 Javascript 停止工作
【发布时间】：2017-03-08 19:49:57
【问题描述】：

在标题中解释这个问题有点困难，但我已经尽力了。这是关于从主视图使用 Javascript 的部分视图。所以我正在建立一个使用向导驱动的注册表单的网站。我用这个教程http://tech.queryhome.com/138560/creating-wizard-in-asp-net-mvc-part-2

我有一个主视图 (Register.cshtml)，其中包含用于加载部分视图的 div。用户在步骤 1 中输入一些数据，然后在步骤 2 中，依此类推。在第 1 步中，我有一个日期选择器供用户选择日期。输入字段（id 为 datetimepicker2）使用 som JavaScript，如下所示。当 Register.cshtml 加载并显示第 1 步的部分视图时，它工作正常。但是如果用户从第 2 步返回到第 1 步，那么日期选择器就会停止工作。当我将光标放在输入字段中时，什么也没有发生。如果我查看源代码，脚本仍然在那里，所以我想知道为什么它找不到我的 datetimepicker2。

所以场景是开始注册 -> 步骤 1（日期选择器工作） -> 步骤 2 -> 回到步骤 1（日期选择器不工作）。

_Layout.cshtml

@RenderSection("scripts", required: false)

Register.cshtml

<div id="divContainer">
    @Html.Partial("_StepOne")  <!-- Step one is shown as default-->
</div>

@section scripts {         <!-- This is the script that only works the first time -->
    <script type="text/javascript">
        $(document).ready($(function () {
            $('#datetimepicker2').datetimepicker({
                locale: 'da',
                format: 'DD-MM-YYYY'
            });
        }));

    </script>
}

第 1 步

@model MyWebsite.Models.StepOne
@{
    AjaxOptions options = new AjaxOptions();
    options.HttpMethod = "POST";
    options.InsertionMode = InsertionMode.Replace;
    options.UpdateTargetId = "divContainer";
}

@using (Ajax.BeginForm("StepOne", "Wizard", options))
{    
        <input name="DateOfBirth" placeholder="dd-mm-yyyy" type='text' class="form-control" id='datetimepicker2' />
        <button type="submit" name="nextBtn" class="btn btn-primary">Next </button>
}

第 2 步

@model MyWebsite.Models.StepTwo
@{
    AjaxOptions options = new AjaxOptions();
    options.HttpMethod = "POST";
    options.InsertionMode = InsertionMode.Replace;
    options.UpdateTargetId = "divContainer";
}

@using (Ajax.BeginForm("StepTwo", "Wizard", options))
{

        <button type="submit" name="prevBtn" class="btn btn-primary">Back </button>
        <button type="submit" name="nextBtn" class="btn btn-primary">Next </button>
}

控制器只是简单地返回部分视图

WizardController.cs

[HttpPost]
public ActionResult StepOne(StepOne data, string prevBtn, string nextBtn)
{
    if (nextBtn != null)
    {
        if (ModelState.IsValid)
        {
            // Do stuff with data

            return PartialView("_StepTwo");
        }
    }
    return PartialView();
}

[HttpPost]
public ActionResult StepTwo(StepTwo data, string prevBtn, string nextBtn)
{
    CompleteRegistration obj = GetCompleteRegistration();
    if (prevBtn != null)
    {
        StepOne model = new StepOne();
        // Do stuff with data

        return PartialView("_StepOne", model);
    }
    if (nextBtn != null)
    {
        if (ModelState.IsValid)
        {
            // Do stuff with data
            return PartialView("_StepThree");
        }
    }
    return PartialView();
}

【问题讨论】：

哦，我以前从未在 mvc 中遇到过这个问题。很抱歉听到。尽管使用更新面板，但我在网络表单中遇到了这个问题。这是因为当您在部分页面上的元素重新加载时，jquery 不会将您的选择器重新绑定到我认为的那些元素......也许不是。无论如何，请尝试在部分视图中引用您需要的所有脚本，即使您已经在父页面上引用了它们。
太棒了！你的评论让我找到了答案：）我用谷歌搜索了“jquery rebind”并找到了这篇文章：stackoverflow.com/questions/13940591/…

标签： javascript jquery asp.net-mvc asp.net-mvc-partialview

【解决方案1】：

所以我在哈利给出线索后找到了答案。我将 JavaScript 更改为：

    $(document).on('focusin', '#datetimepicker2', function () {
        $(this).datetimepicker({
            locale: 'da',
            format: 'DD-MM-YYYY'
        });
    });

现在它可以工作了:)

【讨论】：