Listview selected item background color not changing

Question

I have this list view that contains list of hotels as link button. When I am selecting a hotel name from listview, I would like to change its background color so that it look like it is selected. I have tried many options but nothing worked.

<asp:ListView ID="HotelListView" runat="server" EnableViewState="true">
  <ItemTemplate>
     <p class="listviewMargin selectedHotelCss">
       <asp:LinkButton ID="SelectedHotelLinkButton" runat="server" Text='<%# Eval("FullName")%>' selectedHotel='<%# Eval("Id")%>' CommandName='selectedHotel' CssClass='darkOliveText'>
       </asp:LinkButton>
     </p>
   </ItemTemplate>
</asp:ListView>

try 1 using CSS:

p.selectedHotelCss a.selected { background-color:red;}

try 2 using JQuery:

$('[Id$=<%= SelectedHospitalLinkButton.ClientID %>]').on("click", function () {

    $(this).addClass('selectedText');
});

try 3 using SelectedItemTemplate:

  <SelectedItemTemplate>
    <tr class="selectedText">
      <td>
        <asp:LinkButton ID="SelectedHospitalLinkButton" runat="server" Text='<%# Eval("FullName")%>' selectedHospitalId='<%# Eval("Id")%>' CommandName='selectedHospitalId' CssClass='darkOliveText'>
         </asp:LinkButton>
       </td>
     </tr>
   </SelectedItemTemplate>

What is wrong I am doing here?

Answer 1

Try adding this code on document ready:

 $('#<%=SelectedHospitalLinkButton.ClientID%>').click(function() {
  $(this).addClass('selectedText');
 });