jQuery textbox change event doesn't fire, mvc

Question

I am trying to fire a method in JQuery, but it won't work.

 @using (Html.BeginForm("AddOrUpdateMethod", "Controller", FormMethod.Post))
{
     //some code
     <div class="row">

            <div class="period-list">
                <span class="advance-season">
                    <span class="glyphicon glyphicon-warning-sign margin-right10"></span>Something
                </span>
                @for (int i = 0; i < Model.Periods.Count; i++)
                {
                    <div class="form-group period">
                        @Html.HiddenFor(model => model.Periods[i].Id, new { @Value = Model.Periods[i].Id })                            
                        <div class="pull-left inline-block col-xs-5 col-sm-5 col-md-5 col-lg-5">                                
                            <div class="text-box-with-icon calendar margin-bottom10">
                                    @Html.TextBoxFor(model => model.Periods[i].From, "{0:dd/MM/yyyy}", new { @class = "form-control period-from", @onchange = "periodChange();" })                                    
                                <span class="icon"></span>
                            </div>
                        </div>
                        <div class="pull-left inline-block col-xs-5 col-sm-5 col-md-5 col-lg-5">                              
                            <div class="text-box-with-icon calendar margin-bottom10">                                   
                                    @Html.TextBoxFor(model => model.Periods[i].To, "{0:dd/MM/yyyy}", new { @class = "form-control period-to" })
                                <span class="icon"></span>
                            </div>
                        </div>
                 }
                 //some code
            </div>
       </div>

}

And my jQuery:

<script type="text/javascript">
function periodChanged() {
    $('.period-from .period-to').change(function () {
        alert("click");
        //some code
   });
}

As you can see I tried already adding @change to textBox control. Nothing is happening. Maybe I should mention as well, that i I am using validation on model.Periods.From and model.Periods.To. Moreover this view is a partial view.

EDIT: I changed into:

<script type="text/javascript">
$(document).ready( function () {
    $('.period-from .period-to').click(function () {
        alert("click");
        if (Model.Periods.All(p=>p.To.Day - p.From.Day + 1 <= 7)) {

        }
    });
});

but it still doesn't work.

Answer 1

    @using (Html.BeginForm("AddOrUpdateMethod", "Controller", FormMethod.Post))
{
     //some code
     <div class="row">

            <div class="period-list">
                <span class="advance-season">
                    <span class="glyphicon glyphicon-warning-sign margin-right10"></span>Something
                </span>
                @for (int i = 0; i < Model.Periods.Count; i++)
                {
                    <div class="form-group period">
                        @Html.HiddenFor(model => model.Periods[i].Id, new { @Value = Model.Periods[i].Id })                            
                        <div class="pull-left inline-block col-xs-5 col-sm-5 col-md-5 col-lg-5">                                
                            <div class="text-box-with-icon calendar margin-bottom10">
                                    @Html.TextBoxFor(model => model.Periods[i].From, "{0:dd/MM/yyyy}", new { @class = "form-control period-from", @onchange = "periodChange();" })                                    
                                <span class="icon"></span>
                            </div>
                        </div>
                        <div class="pull-left inline-block col-xs-5 col-sm-5 col-md-5 col-lg-5">                              
                            <div class="text-box-with-icon calendar margin-bottom10">                                   
                                    @Html.TextBoxFor(model => model.Periods[i].To, "{0:dd/MM/yyyy}", new { @class = "form-control period-to" })
                                <span class="icon"></span>
                            </div>
                        </div>
                 }
                 //some code
            </div>
       </div>

}

@*call the jquery.js file in the main or here*@

<script type="text/javascript">
$(document.ready(function(){

    $('.period-from .period-to').change(function () {
        alert("click");
        //some code
   });

});
</script>

this will fire the alert , but this is not enough for your case, you have to do more than this, as the list is generated in loop

your partial view should look like this, attaching the event after the C# code

Answer 2

Try this way

 $(document).on('change','.period-from .period-to') {
    alert("click");
    //some code
 });