Highlighting a row in a table - jQuery

Question

there!

I know, I know. There may be thousand topics about this.

I'm trying that anyone could point me what am I doing wrong with these codes.

That's the point: a MVC app. The first view (uses a layout) has this razor markup:

@model IEnumerable<ControleDeAcesso.Models.Entidades.Perfil>

@{
    ViewBag.Title = "Perfis";
}

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h2>Lista de Perfis</h2>
        </div>
        <div class="col-md-4 col-md-offset-4 text-right" >
            @Html.ActionLink("Novo Perfil", "CriarPerfil", null, new { @class = "btn btn-primary btn-lg" })
        </div>
    </div>
</div>

<table id="tblDados" class="table table-bordered">
    <thead>
        <tr class="tablehead">
            <th class="text-center">
                @Html.DisplayNameFor(model => model.Nome)
            </th>
            <th class="text-center">
                @Html.DisplayNameFor(model => model.Descricao)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr id="[email protected]">
                <td class="text-left">
                    @Html.DisplayFor(modelItem => item.Nome)
                </td>
                <td class="text-left">
                    @Html.DisplayFor(modelItem => item.Descricao)
                </td>
                <td class="text-right">
                    <button type="button" class="EditaPerfil btn btn-default btn-xs" data-id="@item.Id"><span class="glyphicon glyphicon-pencil" title="Edita o perfil"></span></button>
                    <button type="button" class="RemovePerfil btn btn-default btn-xs" data-id="@item.Id" data-nome="@item.Nome"><span class="glyphicon glyphicon-trash" title="Exclui o perfil"></span></button>
                </td>
            </tr>
        }
    </tbody>
</table>

<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/meusscripts.js"></script>

The meusscripts.js file is like this:

$(function () {
    $("#tblDados tr:gt(0)").hover(function () {
        $(this).addClass("highlightedRow");
    }, function () {
        $(this).removeClass("highlightedRow");
    });
});

With this function I highlight a row in any table with id="tblDados" in hover event using jQuery. It's working pretty fine in this view!

Now, I get this other view:

@{
    ViewBag.Title = "Novo Usuário";
}

<script type="text/javascript">
    $(document).ready(function () {

        $("#divListaAD").hide();

        $("#btnLimpar").click(function () {
            $('#txtPesquisa').val('');
            $("#tblDados > tbody").empty();
            $("#divListaAD").hide();
        });

        $("#btnPesquisar").click(function () {
            if ($("#txtPesquisa").val() != '') {
                var options = {};
                options.url = "/Administracao/ListaDeUsuariosDoAD";
                options.type = "GET";
                options.data = { strPesquisa: $("#txtPesquisa").val() };
                options.dataType = "json";
                options.contentType = "application/json";
                options.success = function (data) {
                    $("#tblDados > tbody").empty();
                    var result = data.Result;
                    for (var i = 0; i < result.length; i++) {
                        $("#tblDados > tbody").append(
                            "<tr>" +
                            "   <td>Selecionar</td>" +
                            "   <td>" + result[i].Login + "</td>" +
                            "   <td>" + result[i].DisplayName + "</td>" +
                            "   <td>" + result[i].Orgao + "</td>" +
                            "   <td>" + result[i].Email + "</td>" +
                            "</tr>");
                    };
                    $("#divListaAD").show();
                    $("#tblDados").tablesorter();
                };
                options.error = function () { alert("Erro ao buscar os usuários no AD!"); };
                $.ajax(options);
            }
            else {
                $("txtPesquisa").focus();
            }
        });

        $("#tblDados > tbody > tr").hover(function () {
            $(this).addClass("highlightedRow");
        }, function () {
            $(this).removeClass("highlightedRow");
        });

    });
</script>
<div class="panel panel-primary">
    <div class="panel-heading"><h4>Novo Usuário</h4></div>
    <div class="panel-body">
        <div class="col-md-9">
            <input type="text" name="txtPesquisa" id="txtPesquisa" class="form-control input-sm" placeholder="Digite o nome (ou parte) ou matrícula (Fx999999)" />
        </div>
        <div class="col-md-3 text-right">
            <button type="button" id="btnPesquisar" name="btnPesquisar" class="btn btn-primary btn-sm" title="Pesquisa em corp.furnas o nome ou matrícula">Pesquisar</button>
            <button type="button" id="btnLimpar" name="btnLimpar" class="btn btn-default btn-sm" title="Limpa os parâmetros de pesquisa">Limpar</button>
            @Html.ActionLink("Voltar", "Usuarios", null, new { @class = "btn btn-default btn-sm", @title = "Volta para a lista de usuários da aplicação" })
        </div>
        <br />
        <div id="divListaAD" style="margin-top: 30px;">
            <table id="tblDados" class="table table-bordered tablesorter">
                <thead>
                    <tr class="tablehead">
                        <th></th>
                        <th class="text-center">Logon</th>
                        <th class="text-center">Nome</th>
                        <th class="text-center">Órgão</th>
                        <th class="text-center">Email</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<script src="~/Scripts/jquery-2.1.0.min.js"></script>
<script src="~/Scripts/jquery.tablesorter.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/meusscripts.js"></script>
<link href="~/Content/style.css" rel="stylesheet" />

Even I bringing that function to the script section of my view file it's not working!

What am I doing wrong?

Thanks for your attention.

Paulo Ricardo Ferreira