jQuery click Funktion auf gridview tr

Question

Im Arbeiten an einem Projekt, das viele Informationen in eine Gridview filtert, ist diese Gridview in einem updatepanel und ich habe das RowDataBound -Ereignis programmiert, um eine css-Klasse in jeder Zeile einzustellen, seit es manuell doesen' t scheint zu funktionieren ... Die Klasse wird hinzugefügt, aber ich muss jetzt eine Klasse auf tr klicken klicken. Ich habe mit jQuery versucht, aber es scheint nicht zu funktionieren (es funktioniert perfekt auf Elemente außerhalb der Tabelle).

Fiddle of what I want

Heres mein 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> 

Mein RowDataBound

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

Und meine jQuery-Funktion

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

Ich bin nicht sicher, was im tun Falsch funktioniert das perfekt auf äußeren Tabellenelementen

Answer 1

Sie verwenden UpdatePanel, die Postback aktualisiert wird. Aber dein Javascript registriert das Ereignis zum ersten Mal. Wenn eine Aktualisierung erfolgt ist, ist die Ereignisregistrierung beendet. Sie müssen on anstelle von click verwenden, um damit umzugehen. Versuchen Sie folgendes:

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