Javascript in MVC Partial view stops working when View is replaced

Question

It's at bit difficult to explain the issue in the Title but did my best.. This is about Partial Views that uses Javascript from the main view. So I'm building a website that uses a wizard driven registration form. I used this tutorial http://tech.queryhome.com/138560/creating-wizard-in-asp-net-mvc-part-2

I have a main view (Register.cshtml) that holds the div which is being used to load the partial views. The user inputs some data in step 1, then step 2 and so on. In step 1 I have a datepicker for the user to select a date. The input field (with id datetimepicker2) uses som JavaScript as you can see below. It works fine when the Register.cshtml loads and the partial view for step 1 is shown. But if the user returns to step 1 from step 2, then the datepicker stops working. Nothing happens when I place the cursor in the input field. If I look at the source code the script is still there so im wondering why it doesnt find my datetimepicker2.

So the scenario is Start to Register -> Step 1 (datepicker works) -> Step 2 -> Back to Step 1 (datepicker does not work).

_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>
}

Step 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>
}

Step 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>
}

The controllers just simply return the partial view

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

So I found the answer after a clue was given by Harry. I changed the JavaScript to this:

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

and now it works :)