带有jquery的表格突出显示行不起作用

Question

我的看法是这样的：

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

这是怎么回事？

Answer 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...");
    });
  });

DEMO HERE

如果您动态加载表格内容，请将代码更改为

$(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...");
        });
      });

DEMO HERE

动态内容加载而不是使用

$(element).click() ;

使用

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