jQuery文本框更改事件未触发，MVC

Question

我正在尝试在JQuery中触发一个方法，但是它不起作用。

 @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>

}

而我的jQuery：

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

如您所见，我已经尝试将@change添加到textBox控件中。 没事 也许我也应该提到，我正在对model.Periods.From和model.Periods.To使用验证。 此外，该视图是局部视图。

编辑：我更改为：

<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)) {

        }
    });
});

但它仍然不起作用。

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>

这将触发警报，但这还不足以满足您的情况，因为列表是循环生成的，因此您还需要做更多的事情

您的局部视图应如下所示，将事件附加在C＃代码之后

Answer 2

试试这个

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