mQuery文本框更改事件不会触发,mvc

时间:2016-07-13 08:11:31

标签: javascript jquery asp.net-mvc

我正在尝试在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控件中。什么都没发生。也许我应该提一下,我在模型上使用验证.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)) {

        }
    });
});

但它仍然不起作用。

2 个答案:

答案 0 :(得分:0)

    @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#代码

之后附加事件

答案 1 :(得分:0)

试试这种方式

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