Dziwne przeładowanie strony Ajax

Witam,

Moja aplikacja ma za zadanie działać z wykorzystaniem ajax'a, oraz w przypadku gdy jest wylaczony JS.
Problem polega na tym że nie mam pojecia czemu, ale po naciśnieciu submit'a raz wywołuje się żądanie z wykorzystaniem AJAX'a
a kolejny raz bez niego i tak naprzemian. Wywolanie ajaxowe ma zwracać PartialView bez przeładowania strony.
Czemy tak się dzieje w moim przypadku?

Controller:

public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(FirmViewModel obj)
        {
            if(ModelState.IsValid)
                return View("Products", obj);

            if (Request.IsAjaxRequest())
                return View("_FirmData", obj);

            return View("Index",obj);
        }

View "Index":

@model FirmREgister.Models.FirmViewModel

@{
    ViewBag.Title = "Dane firmy";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script type="text/javascript">
    $(document).ready(function () {
        $("#next").click(Next_Click)
    })

    function Next_Click(event) {
        event.preventDefault();

        $.ajax({
            url: '@Url.Action("Index")',
            type: 'post',
            dataType: 'html',
            data: $("#FirstStep").serialize(),
            success: function (data) {
                $("#ContentForm").html(data);
            }
        });
    }
</script>

<div id="ContentForm">
    @Html.Partial("_FirmData", Model)
</div>

PartialView "_FirmData":

@model FirmREgister.Models.FirmViewModel
@using System.Globalization;

@functions {
    IEnumerable<SelectListItem> CountryList()
    {
        var s = 1;
        
        var getCultureInfo = CultureInfo.GetCultures(CultureTypes.SpecificCultures);

        var tempCultureList = getCultureInfo.Select(x => new SelectListItem
            {
                Value = new RegionInfo(x.LCID).EnglishName,
                Text = new RegionInfo(x.LCID).EnglishName
            })
            .OrderBy(x => x.Text)
            .ToList();

        var CultureList = new List<SelectListItem>();
        
        foreach (var cultureItem in tempCultureList)
            if(!CultureList.Select(x => x.Value).Contains(cultureItem.Value))
                CultureList.Add(cultureItem);

        return CultureList;
    }
}

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "FirstStep" }))
{
    @Html.AntiForgeryToken()

    <div class="editor-label">
        @Html.LabelFor(model => model.FirmName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.FirmName)
        @Html.ValidationMessageFor(model => model.FirmName)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Nip)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Nip)
        @Html.ValidationMessageFor(model => model.Nip)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Regon)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Regon)
        @Html.ValidationMessageFor(model => model.Regon)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Street)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Street)
        @Html.ValidationMessageFor(model => model.Street)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Number)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Number)
        @Html.ValidationMessageFor(model => model.Number)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.City)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.City)
        @Html.ValidationMessageFor(model => model.City)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.PostCode)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.PostCode)
        @Html.ValidationMessageFor(model => model.PostCode)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Country)
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.Country, CountryList(), "-- Wybierz --")
        @Html.ValidationMessageFor(model => model.Country)
    </div>

    <p>
        <input type="submit" id ="next" value="Next >>" />
    </p>
}

Po zwrotce z serwera podmieniasz całą zawartość formularza razem z przyciskiem Next do nowego przycisku nie podpinasz obsługi zdarzenia click więc uruchamia się jego domyślne zachowanie czyli przeładowanie strony.

No w sumie masz rację pierwsze wywołanie działa potem przełąduje stronę i znowu jeden raz działa.
Jeśli to jest powodem co mówisz jak podpiąć ponownie zdarzenie?
Zdarzenie wywołuje jQuery a przycisk cały czas ma swój identyfikator, rozumiem że po przeładowaniu przycisku on to gubi?

Po przeładowaniu całej strony ponownie uruchamia się $.ready i podpina się obsługa zdarzenia.

Wywołanie ready przerzuciłem do partialnego widoku a ajaxa zostawiłem w głównym teraz jest ok wielkie dzieki.
Czy według ciebie powinienem inaczej do tego podejść?

var form = $("#ContentForm");
form.html(data);

form.('#next').click(Next_Click);

powinno wystarczyć. Architektura jest wystarczająco dobra