GridView上的jQuery单击功能

Question

我正在研究一个将大量信息过滤到gridview中的项目，该gridview在updatepanel内部，并且我将RowDataBound事件编程为在每行上设置一个css类，因为手动执行似乎不起作用...该类被添加，但我现在需要在tr click上切换一个类。 我一直在尝试使用jQuery，但它似乎不起作用（它在表外的元素上完美工作）。

我想要的东西

这是我的GridView

<asp:UpdatePanel ID="UpdatePanel5" runat="server">
    <ContentTemplate>
        <asp:GridView ID="gridTabla" runat="server" BorderColor="White" EnableSortingAndPagingCallbacks="True" GridLines="Horizontal" AutoGenerateColumns="False">
            <AlternatingRowStyle BackColor="#F0F0F0" BorderColor="#F0F0F0" BorderStyle="Solid" />
            <Columns>
                <asp:BoundField AccessibleHeaderText="codesc" DataField="CodEscuela" HeaderText="Cod" />
                <asp:BoundField AccessibleHeaderText="esc" DataField="Escuela" HeaderText="Escuela" />
                <asp:BoundField AccessibleHeaderText="codar" DataField="codCarrera" HeaderText="Cod" />
                <asp:BoundField AccessibleHeaderText="car" DataField="Carrera" HeaderText="Carrera" />
                <asp:BoundField AccessibleHeaderText="codmat" DataField="codMateria" HeaderText="Cod" />
                <asp:BoundField AccessibleHeaderText="materia" DataField="Materia" HeaderText="Materia" />
                <asp:BoundField AccessibleHeaderText="nom" DataField="Nomina" HeaderText="Nomina" />
                <asp:BoundField AccessibleHeaderText="prof" DataField="Profesor" HeaderText="Profesor" />
                <asp:BoundField AccessibleHeaderText="noalumnos" DataField="noAlumnos" HeaderText="Numero de alumnos" />
                <asp:BoundField AccessibleHeaderText="noregistros" DataField="noRegistros" HeaderText="Numero de Registros" />
                <asp:BoundField AccessibleHeaderText="periodo" DataField="Periodo" HeaderText="Periodo" />
                <asp:BoundField AccessibleHeaderText="np" DataField="NP" HeaderText="NP" />
                <asp:BoundField AccessibleHeaderText="ni" DataField="NI" HeaderText="NI" />
                <asp:BoundField AccessibleHeaderText="diez" DataField="Diez" HeaderText="10" />
                <asp:BoundField AccessibleHeaderText="nueve" DataField="Nueve" HeaderText="9" />
                <asp:BoundField AccessibleHeaderText="ocho" DataField="Ocho" HeaderText="8" />
                <asp:BoundField AccessibleHeaderText="siete" DataField="Siete" HeaderText="7" />
                <asp:BoundField AccessibleHeaderText="seis" DataField="Seis" HeaderText="6" />
                <asp:BoundField AccessibleHeaderText="cinco" DataField="Cinco" HeaderText="5" />
                <asp:BoundField AccessibleHeaderText="bantutor" DataField="BandTutor" HeaderText="Reportes de tutor" />
                <asp:BoundField AccessibleHeaderText="banddir" DataField="BandDirector" HeaderText="Reportes de director" />
            </Columns>
            <RowStyle BorderStyle="None" HorizontalAlign="Center" VerticalAlign="Middle" />
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

我的RowDataBound

Protected Sub gridTabla_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles gridTabla.RowDataBound
  e.Row.CssClass = "clickableTr"
End Sub

还有我的jQuery函数

$('.clickableTr').click(function () {
  $(this).toggleClass('activeTr');
});

我不确定自己在做什么错，这完全可以在外部表元素上使用

Answer 1

您正在使用UpdatePanel ，它将在回发时进行更新。 但是您的JavaScript只是第一次注册该事件。 发生更新时，事件注册消失了。 您需要使用on而不是click来进行处理。 尝试这个：

$(function(){
    $("#gridTabla").on("click", ".clickableTr", function(){
        $(this).toggleClass("activeTr");
    });
});