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