MVC中的JavaScript在更换视图时停止工作

Question

很难在标题中解释这个问题，但我做到了。这是关于从主视图中使用JavaScript的部分视图。因此，我正在建立一个使用向导驱动的注册表格的网站。我使用了本教程http://tech.queryhome.com/138560/creating-wizard-in-asp-net-mvc-part-2

我有一个主视图（register.cshtml），该视图保存用于加载部分视图的DIV。用户在步骤1中输入一些数据，然后步骤2等。在步骤1中，我有一个datepicker供用户选择日期。输入字段（带有ID DateTimePicker2）使用SOM JavaScript，如下所示。当寄存器加载寄存器和步骤1的部分视图时，它可以正常工作。但是，如果用户从步骤2返回步骤1，则datePicker停止工作。当我将光标放在输入字段中时，什么都不会发生。如果我查看源代码，脚本仍然存在，所以我想知道为什么它找不到我的dateTimePicker2。

因此，场景开始注册 ->步骤1（datepicker works） ->步骤2->返回步骤1（datePicker不起作用）。

_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();
}

Answer 1

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

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

现在起作用：）