Question

I have gridview and inside it I have a button, I want to call a jQuery function on its click.

Here is my narkup:

<asp:GridView ID="gvContactUs" runat="server" AllowSorting="True" AutoGenerateColumns="False"
     DataKeyNames="ContactID" Width="100%" CellPadding="3" CellSpacing="1" 
     OnPageIndexChanging="gvContactUs_PageIndexChanging"
     OnRowCommand="gvContactUs_RowCommand" 
     OnRowDataBound="gvContactUs_RowDataBound"
     OnRowDeleting="gvContactUs_RowDeleting" 
     OnSorting="gvContactUs_Sorting" AllowPaging="True"
     BackColor="White" BorderColor="White" BorderStyle="Ridge" 
     BorderWidth="2px" GridLines="None">
     <Columns>
         <asp:TemplateField HeaderText="Edit" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="3%">
             <ItemTemplate>
                 <asp:Button Text="text" ID="hello" runat="server" />
             </ItemTemplate>
             <HeaderStyle Width="7%" />
             <ItemStyle HorizontalAlign="Center" />
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Name" ItemStyle-HorizontalAlign="Left">
             <ItemTemplate>
                 <%#Eval("Name")%>
             </ItemTemplate>
             <ItemStyle HorizontalAlign="Left" />
             <HeaderStyle Width="11%" />
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Email" ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="13%">
             <ItemTemplate>
                 <a href="mailto:<%#Eval("Email")%>" class="EmailLink">
                 <%#Eval("Email")%></a>
             </ItemTemplate>
             <HeaderStyle Width="13%" />
             <ItemStyle HorizontalAlign="Center" />
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Phone" HeaderStyle-HorizontalAlign="center" HeaderStyle-Width="7%">
             <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
             <ItemStyle HorizontalAlign="Center" Width="40px" />
             <ItemTemplate>
                 <%#Eval("Phone")%>
             </ItemTemplate>
             <HeaderStyle Width="8%" />
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Status" HeaderStyle-HorizontalAlign="center" HeaderStyle-Width="7%">
             <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
             <ItemStyle HorizontalAlign="Center" Width="40px" />
             <ItemTemplate>
                  <%#Eval("Subject")%>
             </ItemTemplate>
             <HeaderStyle Width="13%" />
         </asp:TemplateField>
         <asp:TemplateField HeaderText="Delete" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="7%">
             <ItemTemplate>
                 <asp:LinkButton CommandName="Delete" CommandArgument='<%#Eval("ContactID") %>' runat="server" ID="lnkbtnDelete">
                     <img src="Images/delete.gif" border="0" alt='Click to Delete this Entry' title='Click to Delete this Entry' />
                 </asp:LinkButton>
             </ItemTemplate>
             <HeaderStyle Width="7%" />
             <ItemStyle HorizontalAlign="Center" />
         </asp:TemplateField>
     </Columns>
     <FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
     <HeaderStyle Height="30px" BackColor="#3E3050" Font-Bold="True" ForeColor="#ffffff" />
     <PagerStyle ForeColor="Black" BackColor="#C6C3C6" HorizontalAlign="Right" />
     <RowStyle Height="25px" BackColor="#DEDFDE" ForeColor="Black" />
     <SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
     <SortedAscendingCellStyle BackColor="#F1F1F1" />
     <SortedAscendingHeaderStyle BackColor="#594B9C" />
     <SortedDescendingCellStyle BackColor="#CAC9C9" />
     <SortedDescendingHeaderStyle BackColor="#33276A" />
 </asp:GridView>

jQuery code is :

 $('[id$=hello]').live('click', function (e) {
        alert('hi8');

    });


    $(function () {

        $('input[id$=hello]').click(function () {

            alert('hikkk');
            return false;
        });
    });

These two things I have tried but still not able to call the jQuery function.
Please help me…

Answer 1

Use attributes contains selector * instead of attribute ends with $. Also ensure you have successfully included required jQuery library.

$(function () {    
      $('input[id*=hello]').click(function () {    
            alert('hikkk');
            return false;
      });
});