[asp.net-mvc]表小聪明行与 jquery 不工作

发布时间: 2016/10/6 5:25:14
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我的看法是︰

@model EscuDes.ViewModels.EstudianteIndexData

@{
    ViewBag.Title = "Estudiantes";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "Create")
    <div class="form-horizontal">
        <div class="form-group">
            @Html.LabelFor(model => model.EscuelaSelectList, "Escuela", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(x => x.Escuela, Model.EscuelaSelectList, "Escuelas", new { @class = "form-control" })
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">Director </label>
            <div class="col-md-10">
                <input type="text" class="form-control" id="Director" disabled="disabled">
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.GrupoSelectList, "Grupo", htmlAttributes: new { @class = "control-label col-md-2 " })
            <div class="col-md-10">
                @Html.DropDownListFor(x => x.Grupo, Model.GrupoSelectList, "Grupos", new { @class = "form-control", @disabled = "disabled" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.EmpleadoSelectList, "Empleado", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(x => x.Empleado, Model.EmpleadoSelectList, "Empleado", new { @class = "form-control", @disabled = "disabled" })
            </div>
        </div>
    </div>
</p>
<br />
<br />
<table id="tabla" class="table table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Apellido P.</th>
            <th>Apellido M.</th>
            <th>Telefono</th>
            <th>Estado</th>
            <th>Grupo</th>
        </tr>
    </thead>
    <tbody id="records_table"></tbody>
</table>
@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Grupo").CascadingDropDown("#Escuela", "GrupoCascadingDDL",
            {
                type: 'post',
                promptText: "Grupos",
                postData: function () {
                    return { EscuelaID: $("#Escuela").val() };
                }
            });
            $("#Empleado").CascadingDropDown("#Grupo", "EmpleadoCascadingDDL",
           {
               type: 'post',
               promptText: "Empleado",
               postData: function () {
                   return { GrupoID: $("#Grupo").val() };
               }
           });
            $('#Empleado').change(function () {
                $("#Empleado").prop('selectedIndex', 1);
                $('#Empleado').blur();
            });
            $('#Grupo').change(function () {
                $.getJSON(
                    '@Url.Action("EstudiantesGrupo", "Estudiante")',
                    { GrupoID: $("#Grupo").val() },
                    function (response) {
                        $.each(response, function (i, item) {
                            $('<tr>').append(
                            $('<td>').text(item.ID),
                            $('<td>').text(item.Nombre),
                            $('<td>').text(item.Paterno),
                            $('<td>').text(item.Materno),
                            $('<td>').text(item.Telefono),
                            $('<td>').text(item.Estado),
$('<td>').text(item.GrupoID)).appendTo('#records_table');
                        });
                    });
               $('#Grupo').blur();
            });
            $('#Escuela').on('change', function () {
                $.getJSON(
                    '@Url.Action("DirectorLabel", "Estudiante")',
                    { EscuelaID: $(this).val() },
                    function (response) {
                        $('#Director').val(response);
                    });
            });
        });
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#tabla tbody tr').click(function (e) {
            alert("Start...");
            if ($(this).hasClass('success')) {
                $(this).removeClass('success');
            } else {
                $('tbody tr.success').removeClass('success');
                $(this).addClass('success');
            }
            alert("Finish...");
        });
    });
</script>
}

/http://jsfiddle.net/2ku99pLc/9/

我见过它的工作对其他的答案,但不是用我的代码,因为我的表获取加载后用户选择选项对级联的 DDL。使用引导 css 和 jquery 1.10.2 的 Im。

与这件事是什么?

解决方法 1:

你需要在你的代码包$(document).ready();

$(document).ready(function(){
    $('#tabla tbody tr').click(function (e) {
        alert("Start...");
        if ($(this).hasClass('success')) {
            $(this).removeClass('success');
        } else {
            $('tbody tr.success').removeClass('success');
            $(this).addClass('success');
        }
        alert("Finish...");
    });
  });

这里演示

如果动态加载表内容如此更改您的代码与

$(document).ready(function(){
        $(document).on('click','#tabla tbody tr',function (e) {
            alert("Start...");
            if ($(this).hasClass('success')) {
                $(this).removeClass('success');
            } else {
                $('tbody tr.success').removeClass('success');
                $(this).addClass('success');
            }
            alert("Finish...");
        });
      });

这里演示

与动态内容的负载,而不是使用

$(element).click() ;

使用

$(document).on('click','element',function(){});
赞助商